Submit 2 forms at once

Question

I want to submit both forms after click 2nd form's submit button.
The hardest part is that action is pointing to a php file with which send an e-mail to the client. I do not want to get 2 e-mails.

Both form data should reach that php file at the same time.

this is 1st form:

<form class="generalForm" id="form1" action="reservationSend.php" method="post">
    <input id="datepicker-example3" type="text" name="datepicker-example3" value="Check In">
    <input id="datepicker-example2" type="text" name="check_out" value="Choose Out">
    <select name="RoomType">
        <option selected="selected" value="0">Room Type</option>
        <option value="Deluxe">Deluxe</option>
        <option value="Family">Executive</option>
        <option value="Conference">Conference</option>
    </select>
</form>

This is the second form:

<form id="form2" class="generalForm" method="post" action="reservationSend.php" onsubmit="return submitForm()">
    <input type="text" name="name" placeholder="Your Name" />
    <input type="text" name="email" placeholder="Your email" />
    <input type="text" name="tp" placeholder="Your Phone Number" />
    <input type="text" name="Country" placeholder="Your Country" />
    <textarea name="message" placeholder="Your Message"></textarea>
    <input type="submit" name="submit" value="submit">
</form>

My javascript, myjscript.js:

function submitForm() {
    document.getElementById("form1").submit();
    document.getElementById("form2").submit();
}

Why aren't you just performing the actions together in one form submit? — Evan Knowles, May 06 '14 at 08:15
The only way is to do 2 post with ajax. You can't submit two forms at the same time. — Jaime García Pérez, May 06 '14 at 08:19
This has been covered multiple times on the site before. I suggest your look at [Submit a form using jQuery](http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery). Normal javascript works just as well, you'll have to write a bit more code though. — Sharadh, May 06 '14 at 08:19
@EvanKnowles I do get it. If you want information to go to two separate places (emails, database, etc.) without explicitly coding it, it is an option. — Anthony Horne, May 06 '14 at 08:19
Your form actions are same ideally You can Make a untied form and you can make a javascript function that if your all values are set and filled then show next part of your form then you can submit these all values together — M.chaudhry, May 06 '14 at 08:19
actually they are in 2 seperate places. i just put those forms here. also 2nd form must have the ability to submit alone. so it is hard to combine imo. — Tharaka Nuwan, May 06 '14 at 08:20
Another option would be to populate data on the second form on the Form1.click and then just submit form2 on form2.click. — Anthony Horne, May 06 '14 at 08:20
Then you need to add input type="hidden" in each form with different name and actions to control their submission — M.chaudhry, May 06 '14 at 08:21
either ajax it, or seperate to two different page, only 1 submit can be allow in 1 form — Se0ng11, May 06 '14 at 08:23
You can't submit multiple forms from the same page. The page will unload before the second form has a chance to submit it's data. Combine the forms into one, or work with AJAX. — Cerbrus, May 06 '14 at 08:24
To get you started: jQuerys AJAX method: https://api.jquery.com/jQuery.ajax/ Or w/o jquery: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest — Rick Lancee, May 06 '14 at 08:47

Luuuud · Accepted Answer · 2014-05-13T11:30:33.863

2

Example submitting a form with AJAX & jQuery.

$('#formID')
.on('submit', function(e){
    e.preventDefault(); //disable default submit action

    var postData = {
        'name' : $('input[name="name"]').val(),
        'email' : $('input[name="email"]').val()
        //etcetera
    };

    $.post(
        'reservationSend.php',
        postData,
        callBack(returnData){
            doStuffWith(returnData);
            //add callback functionality
        },
        'json' //or any other datatype. In this case postData is a JS object, which gets submitted as JSON string
    );

    //You could even trigger the submission of another form here:
    $('#otherForm')
    .trigger('submit');
    //This will trigger the submission of #otherForm
});

$('#otherForm')
.on('submit', function(e){
    e.preventDefault();

    //logic for form submission.
});

You can find documentation on the jQuery AJAX methods here. You'll also find serialize() and serializeArray() there. 2 Methods which can turn a form into a JSON string.

edited May 13 '14 at 11:30

answered May 06 '14 at 08:51

Luuuud

4,206
2
25
34

I'am still working on this. i don't understand what var postData is doing because you haven't mention that kind of a variable for second form. – Tharaka Nuwan May 07 '14 at 04:11
@TharakaandRukshan `var postData;` is a JS Object that gets posted to `reservationSend.php`. In `restervationSend.php` you can retrieve these values by using `$_POST['name']; $_POST['email'];` etcetera. The submission of the second form only gets _triggered_ in this function. You'll have to create the handler for this yourself, although it may look a lot like this one. Good luck! – Luuuud May 07 '14 at 15:27
Just now i was able to see the perfect result. i'am bit new to AJAX so my mistake was i haven't put your code inside "$(document).ready(function(){". :D. i'am writing this comment specially to request you to put whole code when answering newbies like me. thanks again for spending your time on this. – Tharaka Nuwan May 08 '14 at 06:30

Submit 2 forms at once

1 Answers1