Merge values from two forms on submit

Question

I have two forms on one html page. Using jQuery, is it possible to have the data from both forms go into the POST data when the first is submitted?

Answer 1

jQuery serialize supports multiple form elements, So it is possible to do:

$('#form1, #form2').serialize(); 

And for your case, you can do:

$('#form1').submit(function() {     var action = $(this).attr('action');     if (!EntryCheck()) return false;     $.ajax({         url  : action,         type : 'POST',         data : $('#form1, #form2').serialize(),         success : function() {             window.location.replace(action);         }     });     return false; }); 

Answer 2

One approach is to copy all of form2's inputs into form1 once the data validation check succeeds. This assumes you are not doing an AJAX submit.

// new onsubmit function for form1 function form1_onsubmit() {     if (!EntryCheck()) return false;       $('#form2 :input').not(':submit').clone().hide().appendTo('#form1');      return true; } 

If you wanted to cater for hitting submit twice, possibly because of submit fail from the server, we would need to remove any copied inputs before copying in new ones.

// new onsubmit function for form1 function form1_onsubmit() {     $('#form1 :input[isacopy]').remove();      if (!EntryCheck()) return false;       $('#form2 :input').not(':submit').clone().hide().attr('isacopy','y').appendTo('#form1');      return true; }