submitting ajax form with jquery

Question

I have an issue while submitting data using Jquery. When i submit the form the page is getting refreshed instead of updating div. Following is my code

<% using (Ajax.BeginForm("getAjaxTab2",  new AjaxOptions
           {
               UpdateTargetId = "tabs-1",
               InsertionMode = InsertionMode.Replace,
               OnSuccess = "Done"
           }))

{ %> <input type="hidden" id="id" name="id" /> 
<div class="sortby-row"> 
<ul>
 <li>
<input type="submit" name="submit-keyword" value="go" />
</li>
 </ul> 
</div>
  <% } %>

I have not written any jquery. Please help me

---

Any help will be appreciated

Answer 1

Check this post: MS MVC form AJAXifying techniques

Answer 2

This is a Form.

<form action="/home/identify" id="identify_form" method="post">
  Enter name 
  <input name="name" id="name" value="" type="text" /> 
  <input type="submit" value="Join" id="sign-on-submit" />

</form>

In order to submit this form through AJAX, this is what I did.

$(document).ready(function(){
    $('#identify_form').submit(function(){
         v = $('input#name').val();
         alert('v is' + v);

         var datastring = 'name='+escape(v);
         alert('datastring is' + datastring);

         $('#loading').ajaxStart(function(event){
             $(this).show();
         });

         $.ajax({
                   type: 'POST',
                   url: '/home/identify',
                   data: datastring,
                   success: function(data, textstatus){
                       alert('success');
                       top.location.href = '/home/identify_pending';
                   },
                   error: function(XMLHttpRequest, textStatus, errorThrown){
                              alert('error'+errorThrown);
                   }
          });
         return false;
    });
});

Answer 3

$('#formId').ready(function () {
  //your code
}