title: How to get rid of this ajax form posting issue?
body: <p>I am posting a form to controller action. I am getting an error from the controller. </p>
  
  <p>This is the behavior I want:
  If error - show the right error message on the same page without any page refresh.
  If success - show the success message on the page again no page refresh</p>
  
  <p>what I am getting is that the page gets fully refreshed with different url and shows this:
  {"status":"Failed","msg":"\u0027Name\u0027 "}</p>
  
  <p>The url changes to this: ../respond/update which is the action I post to</p>
  
  <p>Basically I want to catch this Failed status and display the msg inside a span.</p>
  
  <p>But why it is taking me to a different page?</p>
  
  <p>Here is the view:</p>
  
  <pre><code>@using (Html.BeginForm("Update", "Respond", FormMethod.Post, new { id = "frmUpdate" }))
  {
    //have my form here
    //submit button
  }
  
  Here is the js handler that posts the form:
  $('#frmUpdate').submit(function () {
              //validation
              $.ajax({
                  url: this.action,
                  type: this.method,
                  data: $(this).serialize(),
                  beforeSend: //show loader
                  success: function (result) {
                      alert(result.status);                    
                  },
                  error: function (xhr, status, error) { alert('error'); }
              });
              return false;
          });
  
  Here is controller:
  [HttpPost]
  public ActionResult Update(ResponseModel model)
  {
      return Json(new { status="Failed", msg = "Name" });
  }
  </code></pre>
  
  <p><strong>EDIT:</strong>
  In Firefox it takes to differnt url.
  But in IE8 I get this error from jquery itself. Interesting...</p>
  
  <p>Message: Object doesn't support this property or method
  Line: 28
  Char: 12724
  Code: 0
  URI: /Content/js/external/jquery-1.6.2.min.js?v=3</p>