CODEWITHSUNDEEP
asp.netjqueryasp.net-mvc-4
Hamdi Baligh
Hamdi Baligh

Reputation: 892

Post Asp.net Form Using AJAX

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

Upvotes: 1

Views: 2143

Answers (3)

Oleksii Aza
Oleksii Aza

Reputation: 5398

//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.

Upvotes: 1

G&#246;khan Girgin
G&#246;khan Girgin

Reputation: 1164

$(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.

Upvotes: 2

David
David

Reputation: 218827

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')

Upvotes: 2

Related Questions