Submit more than one form in Javascript/ajax or jquery

问题

This is what I am trying to do I have 3 forms in one page, i need to have to because one form is open in modal dialog, I wish to submit all 3 forms when the user click in a single button, also I would like a ajax implementation of sucess en error function in the form submit

<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']; 

?>

回答1:

You can also just do the following:

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

This will serialize all three forms into one query string. Just make sure the input names don't overlap.

A complete implementation would look like this:

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

Please note that the PHP code is just for illustration and testing. You should neither implement your form handling like this, nor put it in the same file like your form. It's just all bad style :-)

Here is a working jsFiddle:https://jsfiddle.net/kLa1pd6p/

回答2:

Your almost done with your implementation. To concatenate the forms, you should use &.

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
    });

to add an event handler to the button, you could add an id an attach an event handler

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

and the event handler

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

回答3:

This also should work for you :

<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'];
?>

来源：https://stackoverflow.com/questions/43285860/submit-more-than-one-form-in-javascript-ajax-or-jquery

标签

javascript

php

jquery

ajax

forms