CODEWITHSUNDEEP
javascriptformspostgetform-submit
user1824806
user1824806

Reputation: 65

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

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">

Upvotes: 2

Views: 2684

Answers (5)

TheWandererLee
TheWandererLee

Reputation: 203

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.

Upvotes: 1

Jen Zhang
Jen Zhang

Reputation: 1658

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

Upvotes: 1

Eru
Eru

Reputation: 187

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.

Upvotes: 1

Errol Fitzgerald
Errol Fitzgerald

Reputation: 3008

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.

Upvotes: 2

jpsimons
jpsimons

Reputation: 28100

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?

Upvotes: 0

Related Questions