title: jQuery: $.ajax() redirects to its URL form action parameter instead of performing AJAX request to the form action
body: <p>I will show my code first before explaining my problem.</p>
  
  <p>Here is my form:</p>
  
  <pre><code>&lt;form id="update-sale-form" method="POST" action="actions/updatesale.php"&gt;
  &lt;table id="update-sale-table" class="table borderless"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;label&gt;Item Code&lt;/label&gt;&lt;/td&gt;
          &lt;td id="item-code"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;label&gt;On Sale?&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;input type="hidden" id="itemcode" name="item-code" value="" /&gt;
              &lt;select id="is-sale" class="form-control" name="is-on-sale" onchange="checkSale(this.value)"&gt;
                  &lt;option value="0"&gt;No&lt;/option&gt;
                  &lt;option value="1"&gt;Yes&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;label&gt;Percentage&lt;/label&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;div class="input-group"&gt;
                  &lt;input type="text" id="sale-percentage" class="form-control input-sm" name="sale-percentage" onkeypress="return isNumberKey(event)" maxlength="2"/&gt;
                  &lt;span class="input-group-addon"&gt;%&lt;/span&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div class="response"&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;script type="text/javascript"&gt;
  function disableSalePercentage(){
      $('#sale-percentage').prop('disabled', true);
      $('#sale-percentage').val('0');
  }
  
  function isNumberKey(evt){
      var charCode = (evt.which) ? evt.which : event.keyCode
      if (charCode &gt; 31 &amp;&amp; (charCode &lt; 48 || charCode &gt; 57))
          return false;
      return true;
  }
  
  function checkSale(value){
      if(value=='0'){
          disableSalePercentage();
      } else {
          $('#sale-percentage').prop('disabled', false);
          $('#sale-percentage').val('');
      }
  }
  </code></pre>
  
  <p></p>
  
  <p>Here is my PHP file that handles the request.</p>
  
  <pre><code>&lt;?php
  session_start();
  require '../config/consettings.php';
  
  $itemCode = $_POST['item-code'];
  $isSale = $_POST['is-on-sale'];
  $salePercent;
  
  if($isSale==1){
      if(empty($_POST['sale-percentage']) OR ($_POST['sale-percentage']==00)){
          echo "Please provide valid percentage value.";
          return;
      } else $salePercent = $_POST['sale-percentage'];
  } else $salePercent = 0;
  
  $stringQuery = "UPDATE vc_products SET issale='$isSale', salepercent='$salePercent' WHERE code='$itemCode'";
  $updateQuery = mysqli_query($connection, $stringQuery);
  if($updateQuery) echo "good-query";
  else echo mysqli_error($connection);
  ?&gt;
  </code></pre>
  
  <p>Here is the JavaScript that handles the AJAX request:</p>
  
  <pre><code>$("#products-table").on('click', 'span.sale-toggle', function(){
      var itemCode = $(this).attr('itemcode');
      var isSale = $(this).attr('issale');
      var salePercent = $(this).attr('percent');
  
      BootstrapDialog.show({
          title: '&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt; Editing Sale Information.',
          message: $('&lt;div&gt;&lt;/div&gt;').load('forms/updatesale.php'),
          cssClass: 'edit-sale-modal',
          onshow:function(){
              //Do nothing.
          },
          onshown:function(){
              $('#update-sale-table td#item-code').html(itemCode);
              $('#update-sale-table input#itemcode').val(itemCode);
              if(isSale == 'true'){
                  $('#update-sale-table select#is-sale').val('1');
                  $('#update-sale-table input#sale-percentage').val(salePercent);
              } else {
                  $('#update-sale-table select#is-sale').val('0');
                  disableSalePercentage();
              }
          },
          buttons:[{
              label: '&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;',
              cssClass: 'btn-danger',
              action: function(dialog){
                  dialog.close();
              }
          }, {
              label: '&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;',
              cssClass: 'btn-primary',
              hotkey: 13,
              action: function(dialog){
                  var actionPath = $('form#update-sale-form').attr('action');
                  var formData = $('form#update-sale-form').serialize();
  
                  $.ajax({
                      url: actionPath,
                      type: 'POST',
                      data: formData,
                      beforeSend: function(){
                          //Do nothing.
                      },
                      success:function(actionResponse){
                          var response = actionResponse.trim();
  
                          if(response=='good-query'){
                              dialog.close();
                              BootstrapDialog.show({
                                  title: '&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt; Sale Record Updated.',
                                  message: 'Sale record successfully changed.',
                                  cssClass: 'sale-change-successfull',
                                  buttons: [{
                                      label: '&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;',
                                      cssClass: 'btn-success',
                                      hotkey: 13,
                                      action: function(dialog){
                                          dialog.close();
                                      }
                                  }]
                              });
                          } else {
                              var message = "&lt;div class='alert alert-danger'&gt;"+response+"&lt;/div&gt;";
                              $('.response').html(message);
                          }
                      }
                  });
              }
          }]
      });
  });
  </code></pre>
  
  <p>I really need a hand here. My problem is that, my jQuery AJAX function is "redirecting" to the "form actions" url instead of performing the AJAX and returning the result. In my bootstrap dialog box, the form was loaded and it has a button that listens to an event where enter key is pressed and it works fine but if the percentage field is focused and the enter key is hit the page redirect to the form action and not performing the ajax call. No error displayed so i cannot troubleshoot the error but if the check button on the modal box is clicked, everything works fine. it only redirect when i am inputting the percentage value and hit enter which is most end users usually do. I really need some help here. Please spare me a little bit of your time and check what is wrong with my <code>$.ajax()</code> call, I really think there is something wrong with it but I just cant figure it out. Please, I need some help.</p>