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

问题描述：

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

In my html I have multiple forms (text inputs, radio buttons, check boxes and select) and one button. I would like to fill all these forms and send values to my php file. For now I am trying to submit values from text input and select but I am stuck at this point.

我有一个js提交文件：

I have a js submit file:

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

我的表格是这样的：
SELECT：

And my forms are like this: 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()"/>

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

But this is not working. Can you help me please? Thank you

答

这是一个原生Javascript实现的简单示例。

Here's an simple example of a native Javascript implementation.

<!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>

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

相关推荐