javascript 一键提交多个表单
Posted
技术标签:
【中文标题】javascript 一键提交多个表单【英文标题】：javascript Submit multiple forms with one button 【发布时间】：2014-02-06 20:24:11 【问题描述】：在我的 html 中，我有多个表单（文本输入、单选按钮、复选框和选择）和一个按钮。我想填写所有这些表格并将值发送到我的 php 文件。现在我正在尝试从文本输入中提交值并选择，但我被困在这一点上。
我有一个js提交文件：
submitForms = function()
document.getElementById("form1").submit();
document.getElementById("form2").submit();
我的表格是这样的： 选择：
<form id ="form1" name="dists" action="solve.php" method="post">
<select id="demo" name="sadzba" onchange="selectElement1(this.value)>
<option value="">-- vyberte oblasť --</option>
</select>
</form>
文本输入表单+按钮：
<form id="form2" action="solve.php" method="post">
<input type="text" name="spotVT" ><label>kWh za rok VT</label>
<div id="nt" style='display:none'><input type="text" name="spotNT" ><label>kWh za rok NT</label></div>
</form>
<input id="sub" type="button" value="Ok" style="margin-left:15px;" onclick="submitForms()"/>
但这不起作用。你能帮我吗？谢谢
【问题讨论】：
这个问题已经有好几个人问过了，请看这两个链接：***.com/questions/7843355/… ***.com/questions/8563299/… 基本上看起来您需要异步执行此操作。 如何将两件东西提交到两个不同的页面？它需要对服务器进行两次点击，但它是一页。普通表单提交不会发生。 Submit two forms with one button的可能重复 【参考方案1】：只提交一份表格会更容易。您可以通过分配 form="your-form-id" 为您的选择和输入标签提供相同的表单名称。
【讨论】：
【参考方案2】：这是一个原生 javascript 实现的简单示例。
<!DOCTYPE html>
<html>
<head>
<title>Multiform - JAVASCRIPT</title>
</head>
<body>
<fieldset>
<legend>Form 1</legend>
<form name="f1" id="f1" onsubmit="return validate(this)">
<input type="text" name="username" placeholder="Username" />
</form>
</fieldset>
<fieldset>
<legend>Form 2</legend>
<form name="f2" id="f2" onsubmit="return validate(this)">
<input type="text" name="email" placeholder="Email" />
</form>
</fieldset>
<fieldset>
<legend>Form 3</legend>
<form name="f3" id="f3" onsubmit="return validate(this)">
<input type="text" name="password" placeholder="Password" />
</form>
</fieldset>
<button onclick="submitAll();">SUBMIT ALL</button>
<script>
'use strict';
function validate(form)
//forms processsing goes here...
console.log(form, form.name)
return false;
function submitAll()
for(var i=0, n=document.forms.length; i<n; i++)
document.forms[i].onsubmit();
</script>
</body>
</html>
【讨论】：
使用.submit(); 而不是.onsubmit();【参考方案3】：
你可以试试这个。如果提交所有表单适合您的页面
$('form').submit();
实际使用的功能：
function trySubmitAllForms()
if ($('.saveSpinner').is(':visible'))
return;
if ($('form').valid())
$('.saveSpinner').show();
$('form').submit();
else
showValidationErrorMessages();
【讨论】：
【参考方案4】：一旦您提交了一个表单，您的页面会在提交表单后重新加载或终止 javascript，因此最好使用 Ajax 同时提交多个表单
用 jquery
$("#sub").click(function()
$("form").each(function()
var fd = new FormData($(this)[0]);
$.ajax(
type: "POST",
url: "solve.php",
data: fd,
processData: false,
contentType: false,
success: function(data,status)
//this will execute when form is submited without errors
,
error: function(data, status)
//this will execute when get any error
,
);
);
);
当你点击一个id为sub的按钮时，上面的代码会提交每一个表单
【讨论】：
【参考方案5】：Bismillah，试试我们下面的方法吧，insyaAllah 希望能为你提供解决方案。
document.getElementById("submit").addEventListener("click", function ()
$(function ()
$("#formid01").delay(300).submit();
$("#formid02").delay(300).submit();
);
);
【讨论】：
以上是关于javascript 一键提交多个表单的主要内容，如果未能解决你的问题，请参考以下文章