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;
}

Answer 3

I used below code to submit two forms' data in my website.

The idea is that you get the multiple forms data using serialize and combine that data and equalize that to data parameter of the $.ajax function.

.

// submits two forms simultaneously
function submit_forms(form1_id, form2_id)
{
    var frm1_name = $("#" + form1_id).attr('name');
    var frm2_name = $("#" + form2_id).attr('name');

    if (frm1_name == frm2_name)
    {
        alert('The two forms can not have the same name !!');
    }
    else
    {
        var frm1_data = $("#" + form1_id).serialize();
        var frm2_data = $("#" + form2_id).serialize();

        if (frm1_data && frm2_data)
        {
            $("#div_busy").html('<strong>Processing...</strong><br /><img id="busy" src="./images/progress_bar.gif" border="0" style="display:none;" />');
            $("#busy").fadeIn('slow');

            $.ajax(
            {
                   type: "POST",
                   url: "process_sticker_request.php",
                   data: frm1_data + "&" + frm2_data,
                   cache: false,

                   error: function()
                   {
                        $("#busy").hide('slow');
                        $("#div_busy").css({'color':'#ff0000', 'font-weight':'bold'});
                        $("#div_busy").html('Request Error!!');
                   },
                   success: function(response)
                   {
                        $("#div_busy").hide('slow');
                        $("#hdnFormsData").html(response);

                            // open popup now with retrieved data
                            window.open('', 'popup2', 'toolbars = 1, resizable=1, scrollbars=1, menubar=1');
                            document.getElementById("prt").action = 'win_sticker.php';
                            document.getElementById("prt").target = 'popup2';
                            document.getElementById("prt").submit();

                            // reset the action of the form
                            document.getElementById("prt").action = 'list_preview.php';

                   }
             });                
        }
        else
        {
            alert('Could not submit the forms !!');
        }
    }
}

Answer 4

While the answers about address the question you asked, it may be worth considering why you have 2 separate forms, if you want to send the contents of both forms whenever the user submits one.

If you are using 2 different forms to separate them visually, a better approach may be to use CSS to place the elements on the screen as you desire. That way, you are not relying on the presence of Javascript to ensure that your forms are populated correctly.