Post Asp.net Form Using AJAX

Question

I am a little new to JQuery. let's suppose that we have this jquery function :

var f = $("#myForm");
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
    $("#postResult").html(data);
});

and this form :

<form id="myForm" action="/Monitor/Test/FormPost" method="post">
    <div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
    <div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
    <div>Age: <input name="Age" type="text" value="43" /></div>
    <input type="submit" value="Save Contact" />
    <div id="postResult">?</div>
</form>

How can I bind the save button with the jquery function ? Thank you

David · Accepted Answer · 2013-06-25 22:41:13Z

One simple way would be to bind to the click event of the button. Something like this:

$('#myForm input[type="submit"]').click(function () {
    var f = $("#myForm");
    var url = f.attr("action");
    var formData = f.serialize();
    $.post(url, formData, function(data) {
        $("#postResult").html(data);
    });
});

This specifically looks for the submit input that's a child of the form of id "myForm" (in case there are other buttons, etc.) and responds to its click event with the function in question.

Just to be safe, since you're essentially short-circuiting the form and posting via AJAX, you should also probably change the submit to a normal button:

<input type="button" value="Save Contact" />

Or perhaps:

<button value="Save Contact" />

Which would change your jQuery selector to:

$('#myForm input[type="button"]')

Or:

$('#myForm button')

Gökhan Girgin · Accepted Answer · 2013-06-25 22:42:52Z

2

$(document).on("click","input[type=submit]",function(e)
        {
          e.preventDefault();
          var form = $(this).closest("form");
          $.post(form.attr("action",form.serialize(),function(d){
            //result
          });
        });

more general way.

answered Jun 25, 2013 at 22:42

Gökhan Girgin

1,1648 silver badges12 bronze badges

6 Comments

Hamdi Baligh Over a year ago

one more question, what if I have many forms, how can I specify wich one i will be using, is there an other version where I can explicitly pick a form by it's Id ?

Gökhan Girgin Over a year ago

there can be many ways but you can seperate easily with dom manipulation for example; <form data-send="ajax" ....> and in jquery if(form.data("send") != undefined) {do with ajax} else {form.submit();}

David Over a year ago

@HamdiBaligh: In this example (which uses event delegation, which is awesome) the second argument is the selector for the button. If your form has an ID, you can use selectors like the one in my answer as the second argument in the call to .on(). You could also just put an id on your button, in which case the second argument to .on() (or the primary selector in my answer) would simply be #theIDOfTheButton.

Hamdi Baligh Over a year ago

@David I tried your solution but when I click the button it redirects me to an other html page where there is the String that I returned, I want it to be assynchronous

David Over a year ago

@HamdiBaligh: Sounds like the form is still posting normally (which doesn't mean the AJAX isn't working, just that it's being ignored by the primary form post). e.preventDefault() should prevent this. Adding a return false; in the event handler should help as well. I usually just recommend changing the button from a submit to a regular button, so its default action isn't to submit the form.

|

Oleksii Aza · Accepted Answer · 2013-06-25 22:43:59Z

1

//this handler can work on any form that need to post all values
$("form input[type='submit']", f).click(function(e){
   e.preventDefault();
   var $this = $(this);
   var f = $this.parents('form');
   var url = f.attr("action");
   var formData = f.serialize();
   $.post(url, formData, function(data) {
       $("#postResult").html(data);
   });

   return false;
})

In this code you are subscribing click event. [e.preventDefault();][1] will stop your form from premature submittion and you can do the work you want.

edited Jun 25, 2013 at 22:43

answered Jun 25, 2013 at 22:38

Oleksii Aza

5,40831 silver badges35 bronze badges

Collectives™ on Stack Overflow

Post Asp.net Form Using AJAX

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related