Submit 2 forms with one button in Javascript does not work

Question

I want to submit 2 forms from the same page with one button, so I tried to use the Javascript technic described in this post.

Here is my code:

send.php:

<form action="receive.php" method="post" id="form1">
    <input type="text" value="2nd Form" name="q1" />
</form>
<form action="receive.php" method="post" id="form2">
    <input type="text" value="3rd Form" name="q2" />
</form>


<input type="button" value="Click Me!" onclick="submitForms()" />

<script>

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

</script>

receive.php:

echo $_POST['q1'];

echo $_POST['q2'];

But when it redirects to receive.php only the value of $_POST['q2'] appears, and not the value from the 1st input.

I can't see why is it so. Thank you.

use answer which is after you mention in post ie [this](http://stackoverflow.com/a/38473813/3898339) — Deep 3015, May 20 '17 at 10:31
You can use this answer [Answer here](http://stackoverflow.com/questions/19805108/submit-multiple-forms-with-same-name-with-one-click-jquery) — Naim Malek, May 20 '17 at 10:33
Ok thanks, but apparently one have to activate pop up to make it work and I don't want this because it for my website — ThisIsMe, May 20 '17 at 10:35

score 0 · Answer 1 · answered May 20 '17 at 10:33

0

There is no need for two forms. Move "name="q2"" to first form. Moreover, you are trying to call same form action. That is not appreciated.

answered May 20 '17 at 10:33

Vishnu

127
6

score 0 · Accepted Answer · answered May 20 '17 at 10:39

Unfortunately I cannot setup an example because it's pretty long. But this is what is happening to me. You move inside your code two submit requests, one after the other to the same PHP file, but with two different forms. Supposing this is your PHP code:

echo $_POST['q1'];
echo $_POST['q2'];

When you actually make the first request, q1 gets printed. But immediately after you send the second submit, which "overrides" the first step and you see only the output of the second submit. You can verify it in two ways:

1) Invert the order of the submits:

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

and you should see only q1 printed.

2) Try adding a timeout to the second request, and you should see both the echo:

submitForms = function(){
        document.getElementById("form1").submit();
        setTimeout(function() { 
        document.getElementById("form2").submit(); }, 10000);
    }

so after 10 seconds you should see the second output too.

So actually your requests do happen. If you log values to a file instead of the echo, you should see both the requests happening with your code.

Although this should be the reason to me, I strongly suggest you to change your logic. There is no obvious need to start ALWAYS two submit requests to the same PHP file. Group the two forms and send just one request, maybe adding an input hidden field in order to detect which fields have been sent or which case are you in.

Thank you for you explanation, but actually I can"t group the two forms because they are separated with mutliples div in my page — ThisIsMe, May 20 '17 at 10:48
did you try to follow my suggestions above? you should really do both the submits, the issue is with the echo, which shows you just the last print. If you try to log the request to a file, and then you open the file, you should see both of them — quirimmo, May 20 '17 at 10:50

Submit 2 forms with one button in Javascript does not work

2 Answers2