当同一页面上有多个表单时，如何使用 AJAX 从一个表单发布数据？

Question

我正在尝试构建一个测验，我希望用户能够提交每个问题的答案。

这是 HTML：

<form id="question1">
    Question 1:
    <input type="hidden" class="question" value="1">
    <input type="radio" class="answers" value="1"  name="answer">Answer 1<br>
    <input type="radio" class="answers" value="2"  name="answer">Answer 2<br>
    <input type="radio" class="answers" value="3"  name="answer">Answer 3<br>
    <input type="radio" class="answers" value="4"  name="answer">Answer 4<br>
    <input type="submit" class="submitquestion">
</form>


<form id="question2">
    Question 2:
    <input type="hidden" class="question" value="2">
    <input type="checkbox" class="answers" value="5" name="answers1[]">Answer 1<br>
    <input type="checkbox" class="answers" value="6" name="answers1[]">Answer 2<br>
    <input type="checkbox" class="answers" value="7" name="answers1[]">Answer 3<br>
    <input type="checkbox" class="answers" value="8" name="answers1[]">Answer 4<br>
    <input type="submit" class="submitquestion">
</form>

<form id="question3">
    Question 2:
    <input type="hidden" class="question" value="2">
    <input type="checkbox" class="answers" value="9" name="answers2[]">Answer 1<br>
    <input type="checkbox" class="answers" value="10" name="answers2[]">Answer 2<br>
    <input type="checkbox" class="answers" value="11" name="answers2[]">Answer 3<br>
    <input type="checkbox" class="answers" value="12" name="answers2[]">Answer 4<br>
    <input type="submit" class="submitquestion">
</form>

问题的数量和答案的类型（复选框/单选框）会发生变化。 我希望能够使用提交每个问题而不必刷新页面，并且我希望能够一次提交每个部分的答案。

$(document).ready(function(){
  $(".submitquestion").click(function(){
        $(":checked").each(function() {
          alert($(this).val());
        });
  });
});

上面的代码重新加载页面。 另一个问题是，如果我选择了问题 1 的答案（但我没有提交），那么我会转到问题 2 并在问题 2 中点击“提交”，我将提交问题 1 和问题 2 的答案。有没有办法在不必指定 ID 的情况下做到这一点（因为没有固定数量的问题）。

任何帮助表示赞赏。

Answer 1

如果您收听要提交的表单，您将可以直接访问该表单中的数据。 此外，如果您监听form.submit()并单击该表单中的提交按钮，它将触发form.submit() （一种带有一块石头的两只鸟）。

<script type="text/javascript">
$('form').submit(function(){
    var ajax_data = $(this).serialize(); //all the form data ready to the used in an ajax method

    //whatever cool stuff you need to do
    $(this).find(':checked').each(function(){
        alert($(this).val());
    });

    return false; //stops the form from loading the action property
});
</script>

Answer 2

<script type="text/javascript">
$(document).ready(function(){
  $(".submitquestion").click(function(e){
    e.preventDefault();
    var form = $(this).closest('form');
    $.ajax({
      url: "test.html",
      data: form.serialize(),
      context: document.body,
      statusCode: {
        404: function() {
          alert("test.html change to yours");
        }
      }
    }).done(function() {
      form.addClass("done");
    }).error(function(){
      form.addClass("error");
    });
  });
});
</script>

var form = $(this).closest('form'); - 只获取最接近的父表单。 form.serialize() - 获取序列化的表单数据

您也可以使用form.find('your_selector')仅在当前表单中查找元素

https://codepen.io/22dr22/pen/mdyNoYp