如何使用jQuery一次性提交多个滑块式表单数据？

Hey there! I totally get the frustration—having 8 separate forms means each submit only sends data from that single form, not all the answers you've collected across the slides. Let's fix this with a few straightforward, reliable approaches:

Option 1: Merge All Forms Into One (Simplest & Most Reliable) #

The easiest fix is to wrap all your survey questions inside a single <form> tag. Your slider logic will still control which question is visible, but when you submit, all selected radio values will be sent together.

Here's how to adjust your code:

<% include partials/header %> 
<div class="container overalls">
  <!-- Single main form wrapping all questions -->
  <form action="/survey" method="POST" id="full-survey-form">
    <!-- Question 1 -->
    <div class = "box-survey">
      <div class = "question">
        <p>1 | What software stack do you prefer to code in ?</p>
      </div>
      <div class = "answers">
        <ul>
          <li class = "options1">
            <input type="radio" value = "1" name = "options1" id = "r1">
            <label for="r1">MEAN Stack</label>
          </li>
          <hr>
          <!-- Rest of question 1 options -->
        </ul>
      </div>
    </div>

    <!-- Question 2 (remove the inner <form> tag) -->
    <div class = "box-survey">
      <div class = "question">
        <p>2 | What software stack do you prefer to code in ?</p>
      </div>
      <div class = "answers">
        <ul>
          <li class = "options2">
            <input type="radio" value = "5" name = "options2" id = "r5">
            <label for="r5">MEAN Stack</label>
          </li>
          <hr>
          <!-- Rest of question 2 options -->
        </ul>
      </div>
    </div>

    <!-- Repeat this pattern for all 8 questions -->
  </form>

  <!-- Navigation controls -->
  <div class = "scroll-list">
    <div class="backB .col-md-2" onclick="plusDiv(-1)">
      <div class = "changer-circle-diff"></div>
      <button class="button-back">Back</button>
    </div>
    <!-- Your progress circles here -->
    <div class="nextB .col-md-2" onclick="handleFinalSubmit()">
      <div class = "changer-circle-diff"></div>
      <button class="button-next">Submit Survey</button>
    </div>
  </div>
</div>

<script>
function handleFinalSubmit() {
  // Optional: Validate all questions have been answered
  const allQuestions = ['options1', 'options2', 'options3', 'options4', 'options5', 'options6', 'options7', 'options8'];
  let isComplete = true;

  allQuestions.forEach(questionName => {
    const selected = document.querySelector(`input[name="${questionName}"]:checked`);
    if (!selected) {
      isComplete = false;
      alert(`Please answer question for ${questionName.replace('options', '')}!`);
    }
  });

  if (isComplete) {
    document.getElementById('full-survey-form').submit();
  }
}
</script>

Why this works: Native form submission handles all the data collection for you—your backend will receive every optionsX value just like a regular form. No extra JS hoops to jump through.

Option 2: Collect Data With jQuery & Submit via AJAX #

If you don't want to restructure your HTML, you can use jQuery to gather values from all forms when the final "Next" button is clicked, then send everything via AJAX.

Add this script to your page:

// Assume your final next button has an ID of 'final-submit'
$('#final-submit').click(function(e) {
  e.preventDefault();
  const surveyData = {};
  let isValid = true;

  // Loop through each form to get selected values
  $('.answer-list').each(function() {
    const selectedRadio = $(this).find('input[type="radio"]:checked');
    if (selectedRadio.length) {
      surveyData[selectedRadio.attr('name')] = selectedRadio.val();
    } else {
      isValid = false;
      alert('Please answer all questions before submitting!');
      return false; // Stop looping if a question is unanswered
    }
  });

  if (isValid) {
    // Send all data to your backend
    $.ajax({
      url: '/survey',
      method: 'POST',
      data: surveyData,
      success: function(response) {
        // Redirect to a thank-you page or show success message
        window.location.href = '/survey-complete';
      },
      error: function(xhr) {
        alert('Oops! There was an error submitting your survey: ' + xhr.responseText);
      }
    });
  }
});

Why this works: It preserves your existing form structure but manually collects all answers into a single object, which is sent to your server in one request.

Option 3: Store Answers in Hidden Fields (Step-by-Step Saving) #

If you want to save answers as the user navigates slides, you can store each selection in a hidden field inside a main form, then submit that form at the end.

Add a hidden form to your page:

<form action="/survey" method="POST" id="hidden-submit-form">
  <input type="hidden" name="options1" id="hidden-options1">
  <input type="hidden" name="options2" id="hidden-options2">
  <!-- Add hidden fields for all 8 questions -->
</form>

Then update your navigation logic to save answers when switching slides:

let currentSlide = 1; // Track the active slide

function saveCurrentAnswer() {
  const activeForm = $('.box-survey').eq(currentSlide - 1).find('.answer-list');
  const selectedRadio = activeForm.find('input[type="radio"]:checked');
  
  if (selectedRadio.length) {
    const fieldName = selectedRadio.attr('name');
    $(`#hidden-${fieldName}`).val(selectedRadio.val());
  }
}

// Call this when clicking "Next" or "Back"
function plusDiv(n) {
  saveCurrentAnswer();
  // Your existing slide switching logic here
  currentSlide += n;
}

// Final submit function
function submitSurvey() {
  saveCurrentAnswer(); // Save the last slide's answer
  $('#hidden-submit-form').submit();
}

Why this works: It ensures answers are saved as the user moves through the survey, so you don't lose data if they refresh or navigate away accidentally.

My top recommendation is Option 1—it's the cleanest, most maintainable solution that leverages native form behavior. Pick whichever fits your existing code structure best!

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