javascript 一键提交多个表单答案

【问题标题】：javascript Submit multiple forms with one buttonjavascript 一键提交多个表单
【发布时间】：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()"/>

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

【问题讨论】：

这个问题已经有好几个人问过了，请看这两个链接：stackoverflow.com/questions/7843355/… stackoverflow.com/questions/8563299/… 基本上看起来您需要异步执行此操作。
如何将两件东西提交到两个不同的页面？它需要对服务器进行两次点击，但它是一页。普通表单提交不会发生。
Submit two forms with one button的可能重复

标签： javascript jquery forms submit form-submit

【解决方案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();
  });
});

【讨论】：