如何使用 jQuery 提交多个表单数据？
Posted
技术标签:
【中文标题】如何使用 jQuery 提交多个表单数据？【英文标题】：how to submit multiple form data using jQuery ?? 【发布时间】：2018-10-25 10:21:37 【问题描述】：我有 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 %>
【问题讨论】：
所以我会问一个显而易见的问题。为什么不将它们全部放在一个表单中？ 使用单一表格是最好的方法。否则你可以尝试将其存储在本地存储中并在提交后将其清除。但不是一个好方法。 ***.com/questions/50157532/… 【参考方案1】：正如 cmets 中所说，只用一种形式处理它是最好的解决方案。 话虽如此，如果您仍然想单独发布它们，您仍然可以使用：
$(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 代码，使其使用divs 而不是@987654327 @s 处理步骤转换。
【讨论】：
非常感谢！我是网页设计的新手，你能告诉我如何制作一个包含所有问题和答案的表单吗？？以上是关于如何使用 jQuery 提交多个表单数据？的主要内容，如果未能解决你的问题，请参考以下文章
使用JQuery的.ajax()提交表单后当前页面表单内容被清空，请问如何保留数据？