Submit more than one form in Javascript/ajax or jquery

Question

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

?>

First of all, you should add a onClick handler for the submit button. Then, you can just concatenate serialization results from all forms and make an AJAX request. This doesn't differ from the usual AJAX request with any custom data. — ghostprgmr
– ghostprgmr, Commented Apr 7, 2017 at 19:40
$.post accepts a data parameter. You can build it however you want. api.jquery.com/jQuery.post — Matt
– Matt, Commented Apr 7, 2017 at 19:42
Was your problem solved? If so, you should close this question by accepting an answer. — Lupinity Labs
– Lupinity Labs, Commented Apr 7, 2017 at 23:12

Lupinity Labs · Accepted Answer · 2017-04-07 20:53:50Z

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/

edited Apr 7, 2017 at 20:53

answered Apr 7, 2017 at 19:50

Lupinity Labs

2,5041 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Otávio Barreto Over a year ago

It's fine but when I retrive in the php vars echo $_POST['one']; echo $_POST['two']; echo $_POST['three']; no value is posted I am submitting the the same test.php file

Lupinity Labs Over a year ago

Of course it doesn't show anything. You are doing an asynchronous $.post there. That means the page is never reloaded, thus your PHP script is never executed again (in the browser). The request calls a second version of the test.php, but you won't see the result in the browser.

Lupinity Labs Over a year ago

It can be on the same page, but you should have it return something for the script to display back to the user. You will get the result from the server in the callback. I will edit my answer, hold on...

Fas M Over a year ago

You can try this , hope it will help

Lupinity Labs Over a year ago

The answer now includes the necessary PHP code to return some HTML data that is then put in the result-div in the .done callback. This should give you the idea... however, put the form processing in a different file to keep things clean.

|

Philipp · Accepted Answer · 2017-04-07 19:49:57Z

1

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

edited Apr 7, 2017 at 19:49

answered Apr 7, 2017 at 19:48

Philipp

15.7k4 gold badges38 silver badges54 bronze badges

4 Comments

Otávio Barreto Over a year ago

How do I call it when user click in the button?

Philipp Over a year ago

Give the button an id or class and add an event handler - I add an example

Otávio Barreto Over a year ago

why 2 functions? this file is the test.php I am submiting to the same file where the code is written but it's not working yet

Philipp Over a year ago

what do you mean with two functions? the latest code snippet is the only you need to do the request - the other was just an other example how you could do it

Phoenix404 · Accepted Answer · 2017-04-07 19:55:16Z

1

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

edited Apr 7, 2017 at 19:55

answered Apr 7, 2017 at 19:40

Phoenix404

1,0681 gold badge15 silver badges32 bronze badges

2 Comments

Otávio Barreto Over a year ago

Not working, also I need a implementation of sucess and error funciton

Otávio Barreto Over a year ago

I tested my file is test.php I am submiting to the same file but when I retrive the vars , no data sent echo $_POST['one']; echo $_POST['two']; echo $_POST['three'];

Collectives™ on Stack Overflow

Submit more than one form in Javascript/ajax or jquery

3 Answers 3

9 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related