Rails中如何在多个文本框为空时隐藏/显示按钮？

Hey there! Let's fix this button visibility issue and clear up the confusion around using input IDs in JavaScript. Here's a step-by-step solution tailored to your Rails setup:

Step 1: Set Up Initial Button State #

First, let's make sure the submit button starts in the correct state (hidden or visible) when the page loads. Update your submit_tag to conditionally set its display based on whether price and mobile params have values:

<%= submit_tag "add", class: "btn btn-sm btn-primary form_submit", 
                      style: "#{params[:price].present? && params[:mobile].present? ? 'display: block;' : 'display: none;'}" %>

Step 2: JavaScript to Toggle Button Visibility #

You already gave your inputs unique IDs (price and mobile)—that's exactly what we need! These IDs let us directly target the inputs in JavaScript without confusion. Here are two implementations to choose from:

Option 1: Native JavaScript (No jQuery)

Add this script to your view (or include it in your asset pipeline):

// Grab references to your inputs and submit button
const priceInput = document.getElementById('price');
const mobileInput = document.getElementById('mobile');
const submitButton = document.querySelector('.form_submit');

// Function to check if both inputs have valid content
function toggleSubmitButton() {
  const priceHasValue = priceInput.value.trim() !== '';
  const mobileHasValue = mobileInput.value.trim() !== '';
  
  // Show button only if both inputs are filled (ignoring empty spaces)
  submitButton.style.display = (priceHasValue && mobileHasValue) ? 'block' : 'none';
}

// Run check when page finishes loading
document.addEventListener('DOMContentLoaded', toggleSubmitButton);

// Run check whenever user types in either input
priceInput.addEventListener('input', toggleSubmitButton);
mobileInput.addEventListener('input', toggleSubmitButton);

Option 2: jQuery (If Your Rails App Uses It)

If you're using jQuery (common in many Rails projects), this shorter version works great:

$(document).ready(function() {
  const $price = $('#price');
  const $mobile = $('#mobile');
  const $submitBtn = $('.form_submit');

  function toggleSubmitButton() {
    const hasPrice = $.trim($price.val()) !== '';
    const hasMobile = $.trim($mobile.val()) !== '';
    $submitBtn.toggle(hasPrice && hasMobile);
  }

  // Initial check on page load
  toggleSubmitButton();

  // Listen for any input changes in the fields
  $price.on('input', toggleSubmitButton);
  $mobile.on('input', toggleSubmitButton);
});

Key Notes: #

• Why IDs work here: Your inputs have unique IDs (price and mobile), so targeting them with getElementById or $('#id') is the most reliable way—no chance of selecting unintended elements.
• Trimmed values: We use trim() to ignore empty spaces, so a user typing just spaces won't be considered as "filling" the input.
• Real-time updates: The input event triggers whenever the user types, pastes, or deletes content, so the button state updates instantly as they interact with the fields.

内容的提问来源于stack exchange，提问作者vp.rb