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

У меня есть 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 %>

🤔 А знаете ли вы, что...
С помощью HTML можно создавать упорядоченные и неупорядоченные списки.


757
1

Ответ:

Решено

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

$(document).ready( function() {

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

});

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


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

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

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