How to submit 2 Forms w/ 1 Submit using Javascript? 1 Form uses "GET" & other uses "POST"

Question

How can I submit 2 forms that are on the same page if 1 Form uses "GET" method & the other uses the "POST". Each form has the same action and goes to the same next page. Need Help. Thanks for everyones help.

How could i get these 2 forms below that use different methods submitted with one button?

<form method="POST" id="Form1" action="nextpage.html">

<input type="text" size="50" name="text_input">

<input type="submit" value="Submit">



<form method="GET" id="Form2" action="nextppage.html">

<input type="text" size="50" name="text_input">

<input type="submit" value="Submit">

At first be sure what you really want to do. Describe it properly with some codes or relevant contents — polin, Nov 15 '12 at 04:49
I have 2 forms on 1 page. Each form has the same action and goes to the same next page. One form use a form method "GET" and the other form uses form method "POST". Just trying to figure out how I can submit both forms with 1 one submit button. — user1824806, Nov 15 '12 at 04:52
[possible duplicate](http://stackoverflow.com/questions/7843355/submit-two-forms-with-one-button) — kieran, Nov 15 '12 at 05:02

score 2 · Answer 1 · answered Nov 15 '12 at 05:04

2

One way you can do this is add a hidden field to each form. For example,

<form action="action.php" method="get">
    <input type="hidden" name="id"  value="form1">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

<form action="action.php" method="post">
    <input type="hidden" name="id" value="form2">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

And in your script you just do a check to see what the value of id is. Another way is to check if the request sent to the server was a post or get.

answered Nov 15 '12 at 05:04

Errol Fitzgerald

2,978
2
26
34

Not exactly sure what you mean – user1824806 Nov 15 '12 at 05:09
You can't use one button to submit two different forms. You need one button for each form. – Errol Fitzgerald Nov 15 '12 at 05:11

score 1 · Answer 2 · answered Nov 15 '12 at 05:14

Use AJAX recursively or collect all datas into one form and submit that one.

A simple form-submit will redirects your page at the first instance and the data from the second will be lost. If you can fully control the server-side, then you can submit only the form with POST data (form2 in my example) and you can apply the GET to the action attribute before submitting it.

I mean:

<form name="form1" id="form1" action="index.php" method="GET">
    <input type="text" name="foo" value="bar" />
    <input type="submit" value="Submit" />
</form>

<form name="form2" id="form2" action="index.php" method="POST">
    <input type="text" name="foo" value="bar" />
</form>

<script type="text/javascript">
    var f = document.getElementById('form1');
    f.onsubmit = function() {
        var t = f.getElementsByTagName('input'),
            l = t.length,
            i = 0,
            r = [];
        for (i = 0; i < l; i++) {
            if (!t[i].name) continue;
            r.push(t[i].name + '=' + encodeURIComponent(t[i].value));
        }
        var p = document.getElementById('form2');
        if (r.length) p.action += '?' + r.join('&');
        p.submit();
        return false;
    }
</script>

But AJAX is a better and more elegant solution which is extendable easily when needed with new functionality, so i take my vote to the asynchronous way of this.

score 1 · Answer 3 · answered Nov 15 '12 at 05:16

1

It doesn;t really make sense to use two forms with a single button, nor is it valid html.

answered Nov 15 '12 at 05:16

Jen Zhang

1,538
3
12
17

score 1 · Answer 4 · answered Nov 15 '12 at 05:29

I would, submit using your POST form, POST to the page, but instead of posting to the page nextpage.html, post to a page like "nextpage.html?var1=value&var2=value"
you would use javascript in the way of:

<form method="POST" id="Form1" action="nextpage.html">
<input type="text" size="50" name="text_input">
<input type="button" value="Submit" onclick="push();">
</form>

<form method="GET" id="Form2" action="nextpage.html">
<input type="text" size="50" name="text_input" id="name_input">
<input type="button" value="Submit" onclick="push();">
</form>

<script>
function push() {
    document.getElementById('Form1').action = "nextpage.html?text_input="+document.getElementById('name_input').value;
    document.getElementById('Form1').submit();
}
</script>

This should work, although messy, and beware of someone putting a ?, &, =, or otherwise non-alphanumeric character into anything you're going to send to the URL bar. The GET and POST variables would be sent to the page.

score 0 · Answer 5 · answered Nov 15 '12 at 05:02

0

You should learn a bit about how HTTP works. The browser does a "request" which is normally either GET or POST, and the response body is parsed as HTML and shown in the web browser.

Posting two forms at the same time doesn't make any sense because that kicks off two HTTP requests. Which one should be used as the new location in the browser?

answered Nov 15 '12 at 05:02

jpsimons

27,382
3
35
45

im sure there has to be a way around this...but thanks for the lesson – user1824806 Nov 15 '12 at 05:08

How to submit 2 Forms w/ 1 Submit using Javascript? 1 Form uses "GET" & other uses "POST"

How could i get these 2 forms below that use different methods submitted with one button?

5 Answers5