Submit Multiple Forms With One Button

[QuirkyGirl]

I am trying to submit multiple forms with one submit button. I have tried the following:

function submitForms() 
{ 
 this.document.form1.submit(); 
 this.document.form2.submit(); 
 this.document.form3.submit(); 
} 

submits form 3, but not 1 or 2

function submitForms() 
{ 
 this.document.form1.submit(); 
 submitForm2(); 
} 
function submitForm2() 
{ 
 this.document.form2.submit(); 
 submitForm3(); 
} 
function submitForm3() 
{ 
 this.document.form3.submit(); 
} 

submits form 3, but not 1 or 2

function submitForm1() 
{ 
 this.document.form1.submit(); 
} 
function submitForm2() 
{ 
 this.document.form2.submit(); 
} 
function submitForm3() 
{ 
 this.document.form3.submit(); 
} 
ACTION="javascript:submitForm1();javascript:submitForm2();javascript:submitForm3();" 

submits form 3, but not 1 or 2

function submitForms() 
{ 
 this.document.form1.submit(); 
 alert('one'); 
 this.document.form2.submit(); 
 alert('two'); 
 this.document.form3.submit(); 
} 

submits all three forms, but displays those annoying alert windows. The forms are submitted in the order expected, but the alert('one') window is displayed before the window from form1 (it calls a servlet that attempts to download a file). alert('one') must be dismissed before form2 is submitted, windows behind windows, and it's just generally kind of messy.

I'd really like to find a better way. Any other ideas?

[Rambo Tribble]

I think if you lose the "this." off your first example, it should work. The "this" keyword refers to the current object, and only one object can be current at any time. The document.form_name should be all the identifier you need.

[Bernard Marx]

It may not be the source of the problem. As long as the function is being called in a global context - I think it is - then

[blue]this[/blue]

refers to the window. I agree it that

[blue]this[/blue]

should be got rid of anyway, as its unnecessary.

Other than that, I'm out of my little envelope. How can more than one form be submitted at the same time? Doesn't the page reload when a form is submitted?

I watch, wait, and hope to learn.

[BlobFisk]

Welcome to WebmasterWorld, QuirkyGirl!

Bernard makes a good point here. By submitting a form you are passing it's data (via the POST or GET method) to a script (generally server side) that processes the information.

Submitting a form triggers an HTTP transfer and a page refresh (even if the form is being sent to the same page).

HTH

<edit>Welcome added</edit>

[edited by: BlobFisk at 2:14 pm (utc) on June 5, 2004]

[Rambo Tribble]

You could be right, Mr. Marx; it could be more of a timeout issue between method calls. In that case, however, I would expect the first form to be the one to fly. I did something vaguely like this once to create e-mails off a text-file address list, but it involved a loop. I did find that modification was necessary to get functionality across Outlook Express, Mozilla Mail, and Opera Mail, so cross-browser testing is a must for any solution.

[QuirkyGirl]

Thank you Rambo, Bernard, and Blob for your help. I took

[blue]this[/blue]

out. But I still have the problem of form submission.

I am not following you on the page reload. Are you saying that when the page is reloaded, then the page doesn't know that it still has a form submission pending? If so, that seems to make sense to me. But I still don't understand why only the last form in the chain is submitted (or rather the ACTION of only the last form in the chain is executed) but not the first, and why inserting those alerts would have any effect.

[Rambo Tribble]

Well, the alert() is kind of a giveaway that it is a timeout problem. Since the submit action is actually HTML, the JavaScript interpreter must overwhelm the browser engine with rapid-fire submits. Hence, only the last one goes to completion.

I believe the reload on forms submission is a soft reload which doesn't clear the form fields. Else, there wouldn't be the problem of forms being submitted repeatedly by people clicking on the submit button over and over. Therefore, I don't think the reload is a factor.

Unfortunately, the submit() method doesn't fire the onsubmit handler, nor does it return anything that could be used as a test before moving to the next command. It looks like the only approach will be to craft your function to povide an adequate timeout interval between calls to submit(). A kludge, to be sure.

An outside possibility would be if between calls to submit() you used the DOM to set the action through JavaScript (document.formName.action = "http://www.yourURL.com"). That might just gum the works the right amount to get everything to process smoothly. Unfortunately, with either work-around, you'll need to do some testing of different browsers on different speed machines, to make sure either your timeout values are sufficient or that the assignment of the action works cross-platform (if it works at all).

[Rambo Tribble]

Actually, it occurs to me upon reflection, since the setTimeout() method actually runs in background, you can set a lengthy timeout without it being a problem from a user perspective. This probably means, however that before you initiate the submit() methods, you will need to make a copy of the form objects to prevent modification of the actual form's contents by the user, after initiating the submission, from being reflected in values received.

Remember, simply assigning the form to a variable name is a reference, not a copy of the object. Also be aware that if the user closes the browser session, thinking the forms have been sent already, you could lose data. You may wish to implement some sort of a dialog that informs the user the forms are in process, then notifies them when the process is complete.

[MichaelBluejay]

Ooh, I know, I know! The last line of whatever script is called when the first Submit is executed (submit1.cgi?) calls the script you want to execute when the second Submit is executed (submit2.cgi?). Stack 'em up.