Как разместить данные, используя 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>

Количество вопросы и тип ответов (флажок / радио) изменится. Я хотел бы иметь возможность использовать отправлять каждый вопрос без необходимости обновлять sh страницу, и я хотел бы иметь возможность отправлять ответы по каждому разделу за раз.

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

Приведенный выше код перезагружает стр. Другая проблема заключается в том, что если я выберу ответ на вопрос 1 (и не отправлю его), то перейду к вопросу 2 и нажму «отправить» в вопросе 2, я отправлю ответы на вопрос 1 и вопрос 2. Есть ли способ сделать это без указания идентификаторов (потому что нет заданного количества вопросов).

Любая помощь приветствуется.

Answer 1

<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

Answer 2

Если вы прослушиваете форму для отправки, у вас будет прямой доступ к данным в этой форме. Кроме того, если вы прослушиваете 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>