Ajax with Form

The reason to impose a http-post request is to send data over. That is why it is always associated with a html form in a web page. How about Ajax? Actually, jQuery can as easily associate a html form to a http-post ajax call.

Define a form

<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>

Make Ajax Post

$('#myForm')
.ajaxForm(function() {
alert("Thank you for your comment!");
});

jQuery find a html form and fire a ajax http-post on it. The anonymous function is the ajax callback handler, when succeed, it will get executed.

Comments

It is a very clean solution and has other extra features, e.g. it support multiple forms in one single page; The form can be either interactive or non-interactive. In the latter case, we can use jQuery programatically assign values to the form fields before they are sent.

Other solutions

In ASP.Net MVC platform, creating an ajax form is as easy as with jQuery

<%using (Ajax.BeginForm(“HelloAjax”, new AjaxOptions { UpdateTargetId = "results" })){ %>
<%= Html.TextBox("textBox1","Enter text")%>
<input type="submit" value="Submit"/><br />
<span id="textEntered">Nothing Entered</span>
<% } %>

Inside the form, submit button(s) issue ajax request upon user clicks.

Here Asp.Net ajax seems applying result to a html tag specified with "UpdateTargetId", while with jQuery we specify a handler function. I would believe jQuery way gives more flexibility toward handling the return data from an Ajax call.