У меня есть 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 можно создавать упорядоченные и неупорядоченные списки.
Как сказано в комментариях, лучше всего справиться с этим с помощью только одной формы. При этом, если вы все еще хотите публиковать их отдельно, вы все равно можете использовать:
$(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
для обработки перехода между шагами.