当同一页面上有多个表单时，如何使用 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