用Javascript / ajax或jquery提交多个表单

Question

这就是我要执行的操作，我在一页中有3个表单，我必须这样做，因为在模式对话框中打开了一个表单，我希望在用户单击单个按钮时提交所有3个表单，我也想提交形式的成功错误函数的ajax实现

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>

var firstFormData = $("#form1").serialize();
var secondFormData = $("#form2").serialize();
var thirdFormData = $("#form3").serialize();


$.post(
    URL: test.php             
    firstFormData + secondFormData + thirdFormData
); 
</script>

<form id="form1">
<input type="text" name="one"></input>
</form>

<form id="form2">
<input type="text" name="two"></input>
</form>

<form id="form3">
<input type="text" name="three"></input>
</form>

<button>submit here</button>
<?php 

echo $_POST['one']; 
echo $_POST['two']; 
echo $_POST['three']; 

?>

Answer 1

这也应该为您工作：

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$("#sub").on("click mousedown touchstart", function (){
var firstFormData = $("#form1").serialize();
var secondFormData = $("#form2").serialize();
var thirdFormData = $("#form3").serialize();

    $.ajax( {
        type: 'POST',
        url: 'test.php',
        data: {
                one: firstFormData,
                two: secondFormData,
                three: thirdFormData
              },
        success: function(data) {
            console.log(data);
        }
    }); 

});    

</script>
<form id="form1">
  <input type="text" name="one"></input>
</form>

<form id="form2">
  <input type="text" name="two"></input>
</form>

<form id="form3">
  <input type="text" name="three"></input>
</form>

<button id="sub">submit here</button>

<?php 

  echo $_POST['one'];
  echo $_POST['two'];
  echo $_POST['three'];
?>

Answer 2

您的实现几乎完成了。 要连接表格，应使用& 。

var firstFormData = $("#form1").serialize();
var secondFormData = $("#form2").serialize();
var thirdFormData = $("#form3").serialize();

$.post('test.php', firstFormData + "&" + secondFormData + "&" + thirdFormData)
    .done(function(data) {
        // success function
    }).fail(function() {
        // fail function
    });

要将事件处理程序添加到按钮，您可以添加ID并附加事件处理程序

<button id="submit-btn">Submit</button>

和事件处理程序

$('#submit-btn').on('click', function() {
    // do the ajax call
    var data = $('#form1,#form2,#form3');
    $.post('test.php', data).done(function(data) {
        alert(data);
    });
});

Answer 3

您还可以执行以下操作：

var combinedFormData = $("#form1,#form2,#form3").serialize();

这会将所有三种形式序列化为一个查询字符串。 只要确保输入名称不重叠即可。

完整的实现如下所示：

<?php
      // PHP Code to return the HTML to be inserted in the #result div
      // Just for demonstration purposes.
      if (count($_POST) > 0) {
            echo "<p>You successfully posted:</p><ul>";
            foreach ($_POST as $key => $val) {
                    echo "<li>$key: $val</li>";
            }
            echo "</ul>";
            exit;
      }
?>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    <form id="form1">
        <input type="text" name="one">
    </form>

    <form id="form2">
        <input type="text" name="two">
    </form>

    <form id="form3">
        <input type="text" name="three">
    </form>

    <button id="sendforms">Submit forms</button>

    <div id="result"></div>

    <script type="text/javascript">
        $(document).ready(function () {
          $("#sendforms").click(function() {
                   var combinedFormData = $("#form1,#form2,#form3").serialize();
                 $.post(
                        "test.php",
                        combinedFormData
                 ).done(function(data) {
                        alert("Successfully submitted!");
                        $("#result").html(data);
                 }).fail(function () {
                          alert("Error submitting forms!");
                 })
          });
        });
    </script>
  </body>
</html>

请注意，PHP代码仅用于说明和测试。 您既不应该像这样实现表单处理，也不应该像在表单中一样将其放入同一文件中。 都是糟糕的风格:-)

这是一个工作的jsFiddle： https ://jsfiddle.net/kLa1pd6p/

用Javascript / ajax或jquery提交多个表单

问题描述

3 个解决方案

解决方案1
1 2017-04-07 19:40:42

解决方案2
1 2017-04-07 19:48:43

解决方案3
1 已采纳 2017-04-07 19:50:35

用Javascript / ajax或jquery提交多个表单

问题描述

3 个解决方案

解决方案1 1 2017-04-07 19:40:42

解决方案2 1 2017-04-07 19:48:43

解决方案3 1 已采纳 2017-04-07 19:50:35

解决方案1
1 2017-04-07 19:40:42

解决方案2
1 2017-04-07 19:48:43

解决方案3
1 已采纳 2017-04-07 19:50:35