Как отправить несколько данных формы с помощью JQuery ??

Question

У меня есть 8 отдельных форм, и они оформлены в CSS как слайдер, и к каждой форме можно перейти, нажав кнопку «Назад» или «Далее».Итак, как мне отправить все данные формы сразу, когда я нажму последнюю кнопку «Далее» или кнопку «Далее» на последнем слайдере.Прямо сейчас, если я отправляю свои данные с помощью функции jQuery .submit (), отправляются только последние данные формы.Я хочу, чтобы все мои данные формы были представлены одновременно.Любые исправления или решения приветствуются.Спасибо!

<% include partials/header %>

<div class="container overalls">
    <div class = "box-survey">
       <div class = "question">
        <p>1 | What software stack do you prefer to code in ?</p>
    </div>
    <div class = "answers">
        <form action="/survey" method="POST" class = "answer-list">
            <ul>
                <li class = "options1">
                    <input type="radio" value = "1" name = "options1" id = "r1">
                    <label for="r1">MEAN Stack</label>
                </li>
                <hr>
                <li class = "options1">
                    <input type="radio" value = "2" name = "options1" id = "r2">
                    <label for="r2">LAMP Stack</label>
                </li>
                <hr>
                <li class = "options1">
                    <input type="radio" value = "3" name = "options1" id = "r3">
                    <label for="r3">MERN Stack</label>
                </li>
                <hr>
                <li class = "options1">
                    <input type="radio" value = "4" name = "options1" id = "r4">
                    <label for="r4">Other Stacks</label>
                </li>
            </ul>
        </form>
    </div>
</div>
<div class = "box-survey">
    <div class = "question">
        <p>2 | What software stack do you prefer to code in ?</p>
    </div>
    <div class = "answers">
        <form action="/survey" method="POST" class = "answer-list">
            <ul>
                <li class = "options2">
                    <input type="radio" value = "5" name = "options2" id = "r5">
                    <label for="r5">MEAN Stack</label>
                </li>
                <hr>
                <li class = "options2">
                    <input type="radio" value = "6" name = "options2" id = "r6">
                    <label for="r6">LAMP Stack</label>
                </li>
                <hr>
                <li class = "options2">
                    <input type="radio" value = "7" name = "options2" id = "r7">
                    <label for="r7">MERN Stack</label>
                </li>
                <hr>
                <li class = "options2">
                    <input type="radio" value = "8" name = "options2" id = "r8">
                    <label for="r8">Other Stacks</label>
                </li>
            </ul>
        </form>
    </div>
</div>
<div class = "box-survey">
    <div class = "question">
        <p>3 | What software stack do you prefer to code in ?</p>
    </div>
    <div class = "answers">
        <form action="/survey" method="POST" class = "answer-list">
            <ul>
                <li class = "options3">
                    <input type="radio" value = "9" name = "options3" id = "r9">
                    <label for="r9">MEAN Stack</label>
                </li>
                <hr>
                <li class = "options3">
                    <input type="radio" value = "10" name = "options3" id = "r10">
                    <label for="r10">LAMP Stack</label>
                </li>
                <hr>
                <li class = "options3">
                    <input type="radio" value = "11" name = "options3" id = "r11">
                    <label for="r11">MERN Stack</label>
                </li>
                <hr>
                <li class = "options3">
                    <input type="radio" value = "12" name = "options3" id = "r12">
                    <label for="r12">Other Stacks</label>
                </li>
            </ul>
        </form>
    </div>
</div>
<div class = "box-survey">
    <div class = "question">
        <p>4 | What software stack do you prefer to code in ?</p>
    </div>
    <div class = "answers">
        <form action="/survey" method="POST" class = "answer-list">
            <ul>
                <li class = "options4">
                    <input type="radio" value = "13" name = "options4" id = "r13">
                    <label for="r13">MEAN Stack</label>
                </li>
                <hr>
                <li class = "options4">
                    <input type="radio" value = "14" name = "options4" id = "r14">
                    <label for="r14">LAMP Stack</label>
                </li>
                <hr>
                <li class = "options4">
                    <input type="radio" value = "15" name = "options4" id = "r15">
                    <label for="r15">MERN Stack</label>
                </li>
                <hr>
                <li class = "options4">
                    <input type="radio" value = "16" name = "options4" id = "r16">
                    <label for="r16">Other Stacks</label>
                </li>
            </ul>
        </form>
    </div>
</div>
<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>
    <div class = "changer-circle .col-md-1" id = "circle1" onclick = "currentDiv(1)"></div>
    <div class = "changer-circle .col-md-1" id = "circle2" onclick = "currentDiv(2)"></div>
    <div class = "changer-circle .col-md-1" id = "circle3" onclick = "currentDiv(3)"></div>
    <div class = "changer-circle .col-md-1" id = "circle4" onclick = "currentDiv(4)"></div>
    <div class="nextB .col-md-2" onclick="plusDiv(1)"> 
        <button class="button-next">Next</button>  
        <div class = "changer-circle-diff"></div> 
    </div>                                                     
</div>

<% include partials/footer %>

Answer 1

Как сказано в комментариях, лучше всего обрабатывать только одну форму. При этом, если вы все еще хотите опубликовать их отдельно, вы все равно можете пойти с:

$(document).ready( function() {

  $('form').each(function() {
    var form = $(this);
    $.ajax({
      type: "POST",
      url: form.attr('action'),
      data: form.serialize(),
      success: function(response){
        console.log(response); /* Or do anything else you need to do */
      }
    });
  });

});

Добавьте код внутри функции ready () к любой функции, обрабатывающей ваши следующие / предыдущие действия, с проверкой, является ли это последним следующим или нет. Не могу предоставить дополнительный код без указанного кода функции

---

Чтобы ответить на ваш комментарий о том, как использовать одну форму:

Я думаю, что это совершенно новый вопрос, поскольку способ его обработки будет зависеть от вашей логики бэкэнда, но, в основном, на стороне представления (ваш html там), поместите весь ваш код, связанный с формой (входные данные, метки ..) в один тег form (вместо нескольких тегов form, как на самом деле)

Вы можете сохранить пошаговую логику, заменив удаленные теги form на теги div, сохранив те же имена классов, а затем адаптировав свой код JavaScript, чтобы он использовал div s вместо * 1020. * s для обработки перехода шагов.