Submit data from two GET forms

Basically I have two forms on the page, both forms use GET method and have an ID attribute. I want the data from both forms to be included in the form submission whenever either of these forms are submitted.

 

Just short sample, but should show the point...

<form id="form_1" onsubmit="document.getElementById('form_2').submit()">
...
</form>

<form id="form_2" onsubmit="document.getElementById('form_1').submit()">
...
</form>

HTML:

 

Will that actually work though, have you tested it?

 

depends, if you want both forms to submit independently via GET, this won't really work. i mean - it will in that it will trigger the second form submit. but because you dont stop the event propagation and you use GET, the url will change to the form of formhandler.php?var=foo&bar=foo etc etc. - coming from the form that was submitted first in all likelihood.

the second form will trigger later and not in time to intercept the page transition probably. even if it does go first, then the original form won't submit.

you really need to stop the even propagation on the submit first, then fork out the OTHER form's submission via ajax and then submit the form that initially triggered.

i hope this makes sense...

 

I don't think that he/she wants both the forms to submit, but more for the values of the opposing form to be added to the querystring of the submitted form.... in which case i would put all the fields into one form and create two regular buttons with onclick events that change the ACTION attribute of the form (depending on the button pressed), and then submit the form. That would be the easiest way.

 

for example:

<form id="form1" action="" method="GET"> 
Form 1:
<input type="text" id="t1" />
<input type="text" id="t2" />
<input type="button" value="Submit Form 1" onclick="form1.action='form1handler.php'; form1.submit()" />
Form 2:
<input type="text" id="t3" />
<input type="text" id="t4" />
<input type="button" value="Submit Form 2" onclick="form1.action='form2handler.php'; form1.submit()" />
</form>

Code (markup):

typed that straight into the browser but you get the idea....

 

ex:

<script>
function submitForm(){
    var frm1 = document.getElementById("form1");
    var frm2 = document.getElementById("form2");
    var url = "action.php?";
    for(key in frm2.elements){
         url += frm2.elements[key].name + "=" + escape(frm2.elements[key].value) + "&"
    }
    
    frm1.action = url;
    frm1.submit();
}
</script>

<form id='form1'>
....
<input type='button' value='Submit' onclick='submitForm();'>
</form>

<form id='form2'>
....
</form>

Code (markup):

 

ajaXpert - are you aware that a form's ACTION parameter cannot contain query string variables?