如何用同一个JavaScript函数选择并序列化页面中不同表单的数据

Hey there! No worries about your English at all—happy to help you out with this form handling issue. Since you've got multiple forms with unique IDs and want one function to handle their submit actions, here's a simple, scalable approach that avoids hardcoding specific form IDs.

Step 1: Update Your HTML #

First, add a shared class to all your form submit buttons (this lets us target them all at once without relying on IDs). Here's a complete example based on your code snippet:

<form id="myform_1">
  <select class="form-control" name="tipo">
    <option value="standard">standard</option>
    <option value="premium">premium</option>
  </select>
  <input type="text" name="username" placeholder="Enter your name">
  <!-- Add shared class to button -->
  <button type="button" class="form-submit-btn">Submit Form 1</button>
</form>

<form id="myform_2">
  <select class="form-control" name="tipo">
    <option value="basic">basic</option>
    <option value="enterprise">enterprise</option>
  </select>
  <input type="email" name="useremail" placeholder="Enter your email">
  <button type="button" class="form-submit-btn">Submit Form 2</button>
</form>

Step 2: Write the Reusable jQuery Function #

We'll use closest() to find the parent form of the clicked button—this works no matter what the form's ID is.

Basic Approach (for static forms) #

Use this if your forms are loaded when the page first loads:

$(document).ready(function() {
  // Target all buttons with our shared class
  $('.form-submit-btn').click(function() {
    // Find the closest parent <form> element relative to the clicked button
    const targetForm = $(this).closest('form');
    // Serialize the form data into a URL-encoded string
    const formData = targetForm.serialize();

    // Do whatever you need with the serialized data
    console.log('Form Data:', formData);
    // Example: Send data to PHP via AJAX
    /*
    $.ajax({
      url: 'your-processing-script.php',
      method: 'POST',
      data: formData,
      success: function(response) {
        console.log('Success! Server response:', response);
      },
      error: function(xhr) {
        console.error('Error:', xhr.responseText);
      }
    });
    */
  });
});

Event Delegation (for dynamic forms) #

If you add forms to the page later (e.g., via AJAX or JavaScript), use event delegation to ensure the function works for new elements:

$(document).ready(function() {
  // Listen for clicks on ANY .form-submit-btn, even ones added after page load
  $(document).on('click', '.form-submit-btn', function() {
    const targetForm = $(this).closest('form');
    const formData = targetForm.serialize();

    console.log('Form Data:', formData);
    // Your processing code here
  });
});

Key Notes #

• Always include name attributes: The serialize() function only collects data from form elements that have a name attribute—double-check your inputs/selects have this!
• Prevent default submission (if needed): If your buttons are type="submit" instead of type="button", add event.preventDefault(); at the start of the click function to stop the page from refreshing:

  $('.form-submit-btn').click(function(event) {
    event.preventDefault(); // Stop default form reload
    // Rest of your code...
  });
  

内容的提问来源于stack exchange，提问作者Palmiro Lousse