submitting two forms with one button

[dawlish]

Does anyone know how you can submit two forms with one button and validate the two before submission?

Essentially I have split a registration form into two as I require some of the content to be stored in a database and some of the content (a word document upload file) to be sent via email.

However the problem I'm getting is that users are completing the first form and not the second therefore was wondering if it was possible to submit both forms with only one button unlike to the two I'm using at present.

I don't want the first form to be submitted unless there are values in the second form.

Can anyone offer any advice or alternatives?

[ecardiff]

I think it should be possible to verify the forms using javascript and then submit both forms.

Something like onClick="CheckForms()"; to initiate the process.

Use the CheckForms() function to verify all your data is correct.

self.document.Form1.submit();
self.document.Form2.submit();

to submit your forms.

Try this [w3schools.com] as a starting point.

Hope that's of some help.
Neil

[txbakers]

The above suggestion doesn't work, because once a form is submitted, focus leaves the document.

This is tricky. I've written the two forms so that when one submits, it redirects to the same page, and sends a hidden field like a flag to indicate it was submitted. Then, in javascript, I check to see if that flag is present, and if so, will fire off another form.submit() routine. You have to be careful to catch the values from the second form before submitting.

Another method is to have the second form on a second page which has the submit routne on the onLoad method. The page never really shows, it appears that the final page loads twice.

[ecardiff]

A good point and well made ;-)

I obviously didn't think that through. Another point (and I think this one's correct!!) is that if you're uploading a file using an input type=file tag, you can't manipulate this with JavaScript. I suppose it would be OK if that went first, and the data to database was the second page...

[aspdaddy]

Hi dawlish,

I dont understand why have you split the form?
Have you set enctype=multipart/form-data
Request all the form fields on the server with the upload object and then do what you want with them.

[jatar_k]

dawlish,

I would just make it one form and then let your script that handles the form sort out what to do with everything.

Send all your values to your script let it drop all appropriate values into the DB and then send off the doc and throw up a thankyou page or whatever happens next.

If the two forms must be submitted together 100% of the time it would only make sense. I would think you could combine your two scripts together with only mild difficulty making sure they don't step on each others toes.

[smokin]

I am inclined to agree with jatar_k, one form would be the way to go. It would be nice to know what server side scripting you are using.

[scotty]

Hi,

I do see that sometimes it is necessary to be able to post two forms simultaneously, especially in the environment where two forms are independent. For example, trying to integrate two different web applications, and both of them have forms on different parts of the page... There are at least two possible ways that I can think of.

First of all, you can use Javascript to post two forms consectively as ecardiff as suggested. However, the problem (lost focus) that txbakers has mentioned is caused by the result of the first form overriding the current document. To overcome that, you can set the target of the form to something else, say, a hidden frame or iframe. Then the current document will not be lost when the first form is posted. For example, somewhere in your document you can have:

<iframe name="dummy" width="0" height="0"></iframe>

And then in your Javascript, you can do the following:

document.Form1.target = 'dummy';
document.Form1.submit();
document.Form2.submit(); 

I am sure that you can also use Javascript to create a hidden frame object, and then assign it to the target property so that you don't need to embed an <iframe/> in your HTML... Just that I have not figured out how to do it yet :)

The second option is to use MSIE's XMLHTTP or Mozilla's XmlHttpRequest object to do posting yourselves. It is actually quite a funky method as it enables web/html applications to perform tasks that was difficult to do before. It basically let your Javascript to perform HTTP requests all on the client side, and you can even do fancy things like XML-RPC! In your problem of posting two forms, you will need to:

1. Harvest data from these two forms by traversing through form.elements, and then encoded them into a string suitable for POST request. Hint: use encodeURIComponent().
   
2. Create a XmlHttpRequest object, i.e.
   

   
    var obj = document.all ? // Check whether it is MSIE
    new ActiveXObject("Msxml2.XMLHTTP") : // MSIE
    new XMLHttpRequest(); // Mozilla
   

   
   
3. Use the object to do the POST request! Then you need to check the readystate to make sure the request has completed. You can then display a thank you message, or redirect to another page when both forms are posted.
   

As you can see, it only works for MSIE > 5 and Mozilla. But who cares about other players anyway :)

[dawlish]

Thanks everyone for your suggestions particularly scotty. Essentially I followed your advice concering submitting the first form to a hidden frame and it works perfectly.