title: JavaScript redirect not working and works only in Chrome if debugger is turned on
body: <p>What is wrong with the following javascript code to redirect on "success"?</p>
  
  <pre><code>$('#recordUser').click(function () {
   $.ajax({
      type: 'POST',
      url: 'api/RecordUser',
      data: $("#recordUserForm").serialize(),
      dataType: 'json',
      success: function (userEmail) {
          var newUrl = "/Home/AnotherPage?email=" + userEmail.Email;
          $(location).attr('href', newUrl);
          //I have also tried following ways to redirect:
          //window.location.href = "/Home/AnotherPage?email=" + userEmail.Email;
          //window.location = "/Home/AnotherPage?email=" + userEmail.Email;
          //window.location.replace(newUrl);
      },
      error: function (xhr, status, err) {
          console.log(xhr);            
      }
   });
  });
  //#recordUser is a button inside a form with method="post"
  </code></pre>
  
  <p><strong>Html</strong> for the form:</p>
  
  <pre><code>       &lt;form id="recordUserForm" accept-charset="UTF-8" method="post"&gt;
          &lt;div class="..."&gt;
           &lt;input id="recordUserEmail" class="span6" name="Email" type="text"&gt;
          &lt;/div&gt;
          &lt;button class="..." id="recordUser"&gt;Submit&lt;/button&gt;
         &lt;/form&gt;
  </code></pre>
  
  <p>I have tested this in Chrome and Firefox and the redirect does not happen on both. I have already made sure that my server code is working fine.</p>
  
  <p>In Chrome, if I run the javascript in debug mode then the page is redirected with any of the redirect commands but if I close the debugger the redirect commands stop working.</p>
  
  <p>If I remove the "method" attribute from my html form then the query string in the url does appear but the page stays on the same location. For example if I was at localhost:80 and then submit the form then the url changes to localhost:80?email=email instead of the expected newUrl. Strangely if I run this in debug then it works as expected. Why?</p>
  
  <p>Would be thankful/happy if someone could point out the mistake and the reason why above code is only working in Chrome debug mode? I would also like to find out how I can get a useful error message to be printed out in my "error" callback? By useful I mean something which points me to the source of the error (eg an exception message, stack trace etc.) and not something that I have to insert manually.</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>If I change the html for button to</p>
  
  <pre><code>        &lt;input class="..." id="recordUser" value="Submit" type="button"/&gt;
  </code></pre>
  
  <p>and use the click method in the script then it works fine. </p>
  
  <p>I would still appreciate an answer informing me how to get it working with <code>button</code> and why the script was working in Chrome debug mode?</p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>While posting Update1 I realized that I was missing the <code>type</code> in the html for <code>button</code>. Maybe, I thought that because it is marked as a <code>button</code> then specifyin the type would be redundant but it is not. </p>
  
  <pre><code> &lt;button type="button" class="..." id="recordUser"&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p>The above markup with the original javascript now works as expected. So, I guess the only question is why it worked in Chrome debug mode then?</p>