Javascript event after a form has been processed

Question

How does javascript register a callback to run when the server has completed processing a form? This is my particular setup:

<form 
    id="savePlaylistForm" 
    name="savePlaylistForm" 
    target="savePlaylistIFrame"
    method="post"
    action="<?=base_url()?>index.php/savePlaylist">
    <input 
        type="hidden" 
        id="savePlaylistEntire"
        name="savePlaylistEntire" />
</form>
<iframe
    id="savePlaylistIFrame"
    name="savePlaylistIFrame"
    style="display: none">
</iframe>

I've tried the following to no avail:

onSubmit

Attaching onSubmit to the form is not the right event because onSubmit happens when the client tries to submit. The server hasn't even been contacted yet.

onLoad

I attached an onLoad to the target iFrame. It doesn't get fired in my case. My server script sets headers to emulate an m3u playlist file. IFrames only fire onLoad when a normal HTML page is loaded, not when a file save dialog pops up. Even if I were to load a plain HTML page in the iFrame, onLoad would only fire the first time the user submits the form. Subsequent submissions won't fire onLoad.

I have no idea how the code would look for this, but if you're using an XMLHttpRequest object (xhr) to submit the data, you should be able to bind an event to the onreadystatechange event. In there you should be able to interrogate the returned headers using xhr.getResponseHeader('Content-Type') or whatever. Might not even need to interrogate if the onreadystatechange event fires and the readyState == 4. — ggutenberg

jpsimons jpsimons · Accepted Answer · 2011-02-17T23:55:01

This doesn't make any sense though, submitting the form reloads the page with the new response. So your original document wouldn't even exist anymore, so how could it run a callback?

You could just attach an onSubmit handler that cancels the default submission action (by returning false) and replicate the default browser submit by making an Ajax call. Then you have a place to attach a response callback (by listening to onReadyStateChange, or by using something higher-level like jQuery).

Javascript event after a form has been processed

1 Answers