I have three forms on a page. They each have multiple inputs including files. I would like so that when I submit the last form, the inputs for all three forms are sent to the POST data for the action location. I can jQuery if necessary.

I have three forms on a page. They each have multiple inputs including files. I would like so that when I submit the last form, the inputs for all three forms are sent to the POST data for the action location. I can jQuery if necessary.

• javascript
• jquery

• Are the other forms submitted before the final? – Virat Kadaru Commented Mar 3, 2010 at 3:47
• no, I want to submit them all at once – Brian Commented Mar 3, 2010 at 3:54
• 1 Duplicate: stackoverflow./questions/2362251/… – user241244 Commented Mar 3, 2010 at 3:59

6 Answers 6

Here's how you could bine multiple forms into one. Now, a warning: if you have more than one form with file-type inputs, you've got a problem that's really hard to solve. The browser will not let you use XMLHttpRequest (ie Ajax, in any form) to post a multi-part form POST with file inputs. You also won't be able to create a new form with the file inputs in it, because you can't set the value of file input elements with Javascript. Thus, the only way this can work is if you have multiple (3? whatever) forms, and only ONE Of them has file inputs. If that's the case, then what you can do is pull all the (non-file) inputs from the other 2 forms into the other form, and then submit that one.

function whenFormsCollide() {
  // pass in one or more form elements
  var forms = $.makeArray(arguments);
  var hasFiles = 0, targetForm = null;
  $.each(forms, function(i, f) {
    if ($(f).find('input:file').length > 0) {
      ++hasFiles;
      targetForm = f;
    }
  });
  if (hasFiles > 1) throw "More than one form has 'file' inputs";
  targetForm = targetForm || forms[0];
  $.each(forms, function(i, f) {
    if (f === targetForm) continue;
    $(f).find('input, select, textarea')
      .appendTo($(targetForm));
  });
  $(targetForm).submit();
}

I haven't tested that, but I've done stuff like it many times and I know that building up a <form> element works fine, even in IE6. (IE has some weird issues with form fields sometimes, but I think this part should be OK. At worst, instead of just being able to "move" the fields with that "appendTo" call you'd have to copy out the names and values and make new form fields.)

You may want to try using serialize() and append the string to your action URL.

You could submit them to hidden Iframes, that way you maintain control of the host page.

You can write one JS function that submits all three forms.

Your only option right now is a jQuery AJAX request (or a XMLHTTP one, but that's not remended).

Try rethinking your design, I mean, why do you need 3 forms on one page... that's too `formy' for me already.

There is something else you can probably do: put the jQuery UI dialog box container div inside one form (this should work, I guess) and just have the fields within it...

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 bine 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 !!');
        }
    }
}

Can you explain the sense of separating information in different forms and bine the information later with JS? And when Java Script is disabled your Formulas didn't work? Put all together in one form. If you want to evaluate only the special data Fields of your Form, check on the server side which submit button was pressed.

When you have a problem an you need JS to fix a normal munication problem, then you have a conceptional problem. JS can help you to customize and give a better UI - but this problem is useless.