title: stop page from postback onkeypress event
body: <p>I have a single page asp.net 4.0 form with couple of textboxes in divs which I programmatically show/hide. On one particular textbox on my form with onkeypressevent defined like this</p>
  
  <pre><code>&lt;fieldset&gt;
      &lt;div class="WizardStepDiv"&gt;
          &lt;label for="MobileNumber"&gt;
              Please enter your mobile number&lt;/label&gt;
          &lt;%--&lt;asp:TextBox name="vmobilenumber" ID="vmobilenumber" runat="server" Style="width: 150px"&gt;&lt;/asp:TextBox&gt;--%&gt;
          &lt;input type="text" name="vmobilenumber" id="vmobilenumber" runat="server" style="width: 150px"
              onkeypress="javascript: return searchKeyPress(event);" /&gt;
      &lt;/div&gt;
      &lt;div class="navigationArrows"&gt;
          &lt;div style="margin-left: 35%; width: 165px;"&gt;
              &lt;div class="previousbutton" style="float: left; padding: 3px 0 0 6px"&gt;
                  &lt;a href="#" onclick="NavigatetoPreviousScreen()"&gt;
                      &lt;img src="image/left_arrow.png" width="18" height="25" alt="navigateprevious" style="background-image: url(image/arrow_box.png)" /&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="nextbutton" style="float: right; padding: 3px 0 0 6px"&gt;
                  &lt;a href="#" id="searchMobileNumber" onclick="NavigatetoNextScreen()"&gt;
                      &lt;img src="image/right_arrow.png" width="18" height="25" alt="navigatenext" style="background-image: url(image/arrow_box.png)" /&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>The searchKeyPress(event) is defined like this</p>
  
  <pre><code>function searchKeyPress(e) {
  // look searchcheckoutKeyPress for window.event in case event isn't passed in
  if (typeof e == 'undefined' &amp;&amp; window.event) { e = window.event; }
  if (e.keyCode == 13) {
      document.getElementById('searchMobileNumber').click();
      if (e.stopPropagation) {
          e.stopPropagation();
      } else {
          e.cancelBubble = true;
      }
    (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
  }
  </code></pre>
  
  <p>}</p>
  
  <p>The NavigatetoNextScreen() function validates the mobilenumber textbox for not empty and if it passes validation it makes an ajax call like this (portions cut out below)</p>
  
  <pre><code>    var mobilenumber = $.trim($("#vmobilenumber").val());
          if (mobilenumber == "" || !isNumber(mobilenumber)) {
              error += "&lt;span&gt;Please enter a valid mobile number to proceed to the next step&lt;/span&gt;&lt;/br&gt;";
  
          }
          if (error == "") {
              $("#errormessage").hide();
              methodName = "GetVistorByMobileNumber";
              $.support.cors = true;
              $.ajax({
                  type: 'GET',);
  </code></pre>
  
  <p>When there is validation error the page does not postback, however on the ajax call returning success or error (after all processing in both cases) the webpage postsback which I do not want.</p>
  
  <p>This behavior is only on Firefox, Chrome and IE <strong>do not postback</strong>. What could be the issue?</p>
  
  <p>Thanks in advance for your help</p>