Question

I want to show a acknowledgement (more precisely a popup) when form is successfully submitted.Previously I was using Ajax to validate form and display pop up but now I want to achieve same without Ajax.
Is there any event in javascript/Jquery which is invoked after successful form submission? or Is there any other alternative available?

Thanks!

---

EDIT 1 :
I am using Spring 3.0.
Here is the detailed scenario
1. User fill the form and click on submit
2. Request will be sent to controller (Server side)
3. Validation will be done at server side
4. If errors are present I am using Spring validation to show it and goto Step 1
5. else successfully submit the form and show a popup.
6. After user clicks on popup redirect to other page.

---

EDIT 2:
I am completely agree with the opinion that Ajax is the right/best way to do it and I already implemented it using Ajax. But client want to use non-ajax approach and I cannot go beyond his words.

Answer 1

This question piqued my curiosity, as I was trying to do something similar using the iframe solution suggested by Leon. Eventually I succeeded, however, I would like to suggest that rather than using a direct onload property, you make use of the jQuery .load() event on the iframe.

Edit: So here’s how I set up the form (using HTML5, so quotes aren’t necessary):

<div id=message></div> /* Example-specific, see below */

<form method=post action=backend.php target=iframe>
    // Form data here
</form>

<iframe name=iframe></iframe>

I added the following CSS code to hide the iframe:

iframe {
    border:0px;
    height:0px;
    visibility:hidden;
    width:0px;
}

Don’t use display:none, as some browsers will refuse to submit to an element that’s not displayed.

Then in my $(document).ready() JavaScript…

$('iframe').load(function(){
  // Your load event here.
});

You could also change that about, so that it specifically only triggers after a specific event (if you’re using dynamic forms, for example). In such a case, you may want to use .unbind('load') before .load() to prevent previously-added .load() functions from calling.

Now when the form is submitted, it loads into the hidden iframe. When the iframe loads the page (backend.php, in my example), it triggers the .load() function. In my specific case, I set up a <div id=message> to display a message:

$('iframe').load(function(){
    $('#message').html('The form successfully submitted.');
});