Forum Moderators: open

Message Too Old, No Replies

Posting Form using Ajax then to form defined action

Is it possible?

         

Demaestro

7:11 pm on Oct 29, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I have a form.. it has an action

<form method="post" action="example.com/landing_page">

<input type="text" name="blah" value"blah">

<input type="submit">

</form>

When submitted I would like to post the form using Ajax... but after that happens I would like the form to be posted to the action defined in the form tag.

So basically it would get submitted twice.... Is this possible?

Any guide to this would be helpful.

HOTmike

4:29 am on Oct 30, 2007 (gmt 0)

10+ Year Member



Instead of the '<input type="submit">' consider using a '<input type="button" onclick="someAjaxFunctionCallToSubmit(someReferenceToForm)">'
and have the AJAX function call for the form to be submitted when it's done.

Another approach, though not an option if the AJAX call must come first, is to 'target' the form to a, possibly hidden, iframe and have the two submissions run simultaneously and independant of each other (or the AJAX call can be delayed), by adding a 'onsubmit="someAjaxFunctionCallToSubmit(someReferenceToForm)"' to the 'form begin' tag.

Rambo Tribble

5:50 am on Oct 30, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Bear in mind, not all versions of X/HTML support the target attribute.

XtendScott

2:01 pm on Oct 30, 2007 (gmt 0)

10+ Year Member



<form method="post" action="example.com/landing_page" onsubmit="ajaxsubmit();">

function ajaxsubmit() {
.....ajax stuff here
return true;
}

This should perform both submits, you may have to perform the ajax call non-synchronous so the page waits for the ajax call to finish.

Demaestro

2:54 pm on Oct 30, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Awesome you guys thanks a lot... just got it working.

Love Ajax! Makes your sites so slick.

Demaestro

4:07 pm on Nov 1, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Ok I ran into a boo-boo

<form method="post" action="example.com/landing_page" onsubmit="ajaxsubmit();">

function ajaxsubmit() {
.....ajax stuff here
return true;
}

This works in IE, but in FF the form data doesn't get passed with the Ajax submit but does get passed to the second "hard" submit. If I set the return to false the form data is passed to the Ajax submit.

function ajaxsubmit() {
.....ajax stuff here
return false;
}

But obviously I don't get the second submition.

Any guesses?

[edited by: Demaestro at 4:12 pm (utc) on Nov. 1, 2007]