javascript用一个按钮提交多个表单

2018-06-27 12:34:14

在我的HTML我有多种形式（文本输入，单选按钮，复选框和选择）和一个按钮。我想填写所有这些表单并将值发送到我的php文件。现在我正在尝试从文本输入中提交值并选择，但我坚持在这一点上。

我有一个js提交文件：

 submitForms = function(){
  document.getElementById("form1").submit();
  document.getElementById("form2").submit();
 }

而我的形式是这样的：SELECT：

 <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()"/>

但是这不起作用。你能帮我吗？谢谢

这个问题已经被几个人问过了，请看这两个链接：

用一个按钮提交两个表单

用一个提交按钮提交多个表单

基本上它看起来像你将需要异步做到这一点。

只提交一份表格会更容易。您可以通过指定form =“your-form-id”来为选择和输入标签赋予相同的表单名称。

以下是一个本地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>

链接地址: http://www.djcxy.com/p/76941.html

上一篇: javascript Submit multiple forms with one button

下一篇: Excel Workbook connections field "Last refreshed" always empty