How do I capture response of form.submit

Question

Hi All,

I have the following code:

<script type="text/javascript">
        function SubmitForm()
        {

            form1.submit();
        }

        function ShowResponse()
        {

        }
</script>
.
.
.
<div>
    <a href="#" onclick="SubmitForm();">Click</a>
</div>

I want to capture the html response of form1.submit? How do I do this? Can I register any callback function to form1.submit method?

Answer 1

You need to be using AJAX. Submitting the form usually results in the browser loading a new page.

Answer 2

I am not sure that you understand what submit() does...

When you do form1.submit(); the form information is sent to the webserver.

The WebServer will do whatever its supposed to do and return a brand new webpage to the client(usually the same page with something changed).

So, there is no way you can "catch" the return of a form.submit() action.

Answer 3

There is no callback. It's like following a link.

If you want to capture the server response, use AJAX or post it to an Iframe and grab what appears there after the iframe's onload() event.

Answer 4

You can do that using javascript and AJAX technology. Have a look at jquery and at this form plug in. You only need to include two js files to register a callback for the form.submit.

Answer 5

You won't be able to do this easily with plain javascript. When you post a form, the form inputs are sent to the server and your page is refreshed - the data is handled on the server side. That is, the submit() function doesn't actually return anything, it just sends the form data to the server.

If you really wanted to get the response in Javascript (without the page refreshing), then you'll need to use AJAX, and when you start talking about using AJAX, you'll need to use a library. jQuery is by far the most popular, and my personal favourite. There's a great plugin for jQuery called Form which will do exactly what it sounds like you want.

Here's how you'd use jQuery and that plugin:

$('#myForm')
    .ajaxForm({
        target : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
            alert("The server says: " + response);
        }
    })
;

Answer 6

An AJAX alternative is to set an invisible <iframe> as your form's target and read the contents of that <iframe> in its onload handler. But why bother when there's AJAX?

Note: I just wanted to mention this alternative since some of the answers claim that it's impossible to do achieve this without AJAX. See http://twofifty.net/ for an AJAX-less working example.

Answer 7

In case you want to capture the output of an AJAX request using Chrome you can follow these simple steps:

1. Open up the Programmers toolbox
2. Go to the console and right anywhere inside it
3. In the menu that appears, click "Enable XMXHTTPRequest Logging"
4. After doing that everytime you make an AJAX request a message starting with "XHR finished loading:http://......" will appear in your console.
5. Clicking on the link that appears, will bring the "Resources tab" where your can see the headers and the content of the response!