CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Otávio Barreto
Otávio Barreto

Reputation: 1558

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

?>

Upvotes: 7

Views: 2554

Answers (3)

Lupinity Labs
Lupinity Labs

Reputation: 2464

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/

Upvotes: 1

Phoenix404
Phoenix404

Reputation: 1058

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

Upvotes: 1

Philipp
Philipp

Reputation: 15629

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

Upvotes: 1

Related Questions