javascript - move value from one html form to another, so one form submits values from itself and another form -

i have 2 html forms, forma , formb. want submit both a's , b's values when b submitted. here code tried:

<script> function combine() { formb=document.getelementbyid('formb').elements; forma=document.getelementbyid('forma').elements; formb[2]=forma[0]; return true; } </script>  <form name=a id=forma> mydrink: <input type=text value=beer name=mydrink><br> </form>  <br>  <form name=b id=formb action=forms.html method=get> bar: <input type=text name=bar value=doogans><br> <input type=submit onclick="return combine();" value=okie> </form> 

the behavior want when form b submitted, posts values bar , mydrink, resulting url is

forms.html?bar=doogans&mydrink=beer 

but instead get

forms.html?bar=doogans 

the code looks should work, not. know doing wrong or forgetting do? thanks!

if you're exploring jquery, here's how can pull forma elements when formb submitted.

html

<form name=a id=forma>     mydrink: <input type=text value=beer name=mydrink /><br /> </form> <br /> <form name=b id=formb action=forms.html method=get>     bar: <input type=text name=bar value=doogans /><br />     <input type=submit value=okie /> </form> 

jquery

$(function() {     $( '#formb input[type = "submit"]' ).on( 'click', function( e ) {         $.each( $( '#forma' ).prop( 'elements' ), function( idx, elem ) {             $( '#formb' ).append( $( '<input />' ).attr({                 type : "hidden",                 name : elem.name,                 value : elem.value             }));         });     }); }); 

working demo: jsfiddle.net (hover on toolbar in iframe see query params after submit)