Question

这就是我要做的事情我在一个页面中有3个表单，我需要因为一个表单在模态对话框中打开，我希望在用户单击一个按钮时提交所有3个表单，我想在表单提交

中执行sucess en error函数的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/

Answer 4

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

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

在Javascript / ajax或jquery中提交多个表单

4 个答案: