how to get response of form submit event in javascript/jquery?

Question

I want to get response of form's submit event in jquery or javascript ?

I am firing form's submit event like that in jquery :-

$(form).submit();

actually for checking the response i am doing it like that :-

alert('resp=' + $(form).submit());

And below is the action method :-

public ActionResult SaveProduct(ProductViewModel model)
   {           
       if (ModelState.IsValid)
       {
           return Json(true);
       }
       else
       {
           return Json(false);
       }

   }

So its just returning true or false. But i getting below response in alert(where i trigger it) :-

[object object]

And i want to know that,how i can get the submit event response like that ?

Solution 1

If you want to inspect responses you should use console.log vs alert, then check the response in the console.

   console.log($(form).submit())  

Solution 2

   $( "#target" ).submit(function( event ) {
        alert( "Handler for .submit() called." );
        event.preventDefault();
    });

For more info: http://api.jquery.com/submit/

Solution 3

The call to .submit() itself, like many jQuery functions, is probably just returning a jQuery object. I'm surprised you're getting anything really. Isn't this call to .submit() causing the page to load the new content entirely? Or is this otherwise happening via AJAX that I'm just not seeing here?

Since the server-side code is just returning JSON data, I assume you don't want to load the page. Normally for an AJAX call I might otherwise just use the .post() function from jQuery. Something like this:

$.post('@Url.Action("SaveProduct", "YourControllerName")', $(form).serialize(), function (result) {
    // here the "result" variable will contain the response from the server
});

This is a bit of a mix of server-side code (using Razor syntax) and client-side code. The server-side call to Url.Action() is just to dynamically create the client-usable URL for that action method. The rest of this is just a call to the jQuery .post() function, passing it three arguments:

1. The URL to call
2. The data to send to the URL, which is from your form using jQuery's .serialize() function
3. The function to handle the response from the server

Comments

[adeneo]

If you're submitting the form, the page reloads, even if you trigger the form submit with jQuery, and all is lost, but you will get the form data on the serverside.

[Amit]

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. If you really wanted to get the response in Javascript (without the page refreshing), then you'll need to use AJAX.

[Pawan]

David we can use this,but it does not cover one condition,if some how we don't have the model($(form).serialize()),then we can't use this approach. >> That's why i want to fire whether $('form').submit or $("#submitbuttonid").click() . >> Since by this the model will post automatically.

[David]

@Pawan: It's not clear what you mean by this. You can attach the an event handler to the form's submit event or the button's click event (or both). Of course, you'll want to prevent the default action for those events (otherwise the form submit event will unload the whole page). All serializing the form does is turn its elements into key/value pairs for the POST event. I suppose you could do that manually for each element, but it generally makes more sense to just serialize the form. It has nothing to do with the MVC model, the model binder infers that from the posted values.