Submit a form in the background

[Christoph]

I have an HTML form that I would like to submit without reloading the
page. I know how to go about this technically - attach a function to
the submit button's onclick event that builds an HttpRequest, sends it
and blocks the form from submitting in the normal fashion.

But building the request body from the form elements is a real bother.
So far most of these forms have had only one or two fields which were
easily stuck together manually, but now I have a file upload field
that complicates things.

Is there some kind of document.getElementById('formID').buildRequest()
function that builds the request the way the browser normally would,
but returns it as a string instead of sending it to the server? It's
hard to believe that all Ajax forms out there cobble together a query
string from the values of each of their individual fields...

 

[VK]

but now I have a file upload field
that complicates things.

It doesn't complicate: it simply eliminates the XmlHttpRequest out of
options - it has no access to type=file fields so it's not able to
submit them. So use more universal and reliable way with hidden target
iframe as already suggested.

For form w/o type=file fields you still can use XmlHttpRequest-based
libraries like from www.ajaxtoolbox.com - they can handle forms of any
complexity.

 

[Ian Hobson]

I have an HTML form that I would like to submit without reloading the
page. I know how to go about this technically - attach a function to
the submit button's onclick event that builds an HttpRequest, sends it
and blocks the form from submitting in the normal fashion.

But building the request body from the form elements is a real bother.
So far most of these forms have had only one or two fields which were
easily stuck together manually, but now I have a file upload field
that complicates things.

Is there some kind of document.getElementById('formID').buildRequest()
function that builds the request the way the browser normally would,
but returns it as a string instead of sending it to the server? It's
hard to believe that all Ajax forms out there cobble together a query
string from the values of each of their individual fields...

Your solution is to have the script that handles your post return a 200
reply with no content.

This will leave the old page displaying on the screen.

NB - Only tested in IE6 and Firefox.

Regards

Ian