Ajax调用提交的时候不应该？

Question

Ok so I am making an Ecommerce website and up until recently the update_cart (quantity) code has been working fine. Now suddenly it has decided to submit my form instead of running the update. I have tried changing a lot as well as moving it outside the form in hopes it would fix the issue. I am sorry for my more than likely sloppy code. If you have any ideas or suggestions please let me know. I know my php, sql, and html pretty well but I know very little concerning ajax and jquery.

I have spent the last 6 hours beating my head over this so any and all help is greatly appreciated!

My cart

  <form class="form" action="cart.php?checkout=1" method="post">
      <table  id="totals" class="table table-bordered table-condensed  table-striped table-auto">
        <thead>
          <th>#</th>
          <th>Item</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Sub Total</th>
        </thead>
        <tbody>
          <?php

            foreach ($items as $item) {
              $product_id = $item['id'];
              $productQ = $db->query("SELECT * FROM products WHERE id = '{$product_id}'");
              $product = mysqli_fetch_assoc($productQ);

              ?>

              <tr>
                <td><?=$i;?></td>
                <td><?=$product['title'];?></td>
                <input type="hidden" name="item<?=$i;?>" value="<?=$product['title'];?>">
                <td><?=money($product['price']);?></td>
                <input type="hidden" name="price<?=$i;?>" value="<?=$product['price'];?>">
                <td>
                  <button class="btn btn-xs btn-default" onclick="update_cart('removeone','<?=$product['id'];?>');">-</button>
                  <?=$item['quantity'];?>
                  <?php if($item['quantity'] < $product['quantity']): ?>
                    <button class="btn btn-xs btn-default" onclick="update_cart('addone','<?=$product['id'];?>');">+</button>
                  <?php else: ?>
                    <span class="text-danger">Max</span>
                  <?php endif; ?>
                </td>
                <td ><?=money($item['quantity'] * $product['price']);?></td>
                <input type="hidden" name="quantity<?=$i;?>" value="<?=$item['quantity'];?>">
              </tr>

          <?php
           $i++;
           $item_count += $item['quantity'];
           $grand_total += ($product['price'] * $item['quantity']);
            }

             ?>
        </tbody>
      </table>





      <table id="totals"  class="table table-bordered table-condensed text-right table-auto">
          <thead class="totals-table-header">
            <th></th>
            <th></th>
            <th></th>
          </thead>
          <tbody>
            <tr>
              <td>Total Items:</td>
              <input type="hidden" name="rows" value="<?=$i;?>">
              <td><?=$item_count;?></td>
              <input type="hidden" name="item_count" value="<?=$item_count;?>">
            </tr>
            <tr>
              <td>Total:</td>
              <td class="bg-success"><?=money($grand_total);?></td>
              <input type="hidden" name="total"  value="<?=$grand_total;?>">
            </tr>
            <tr>
              <td></td>
              <td>    <button type="submit"  class="btn btn-primary btn-sm ">
                  <span class="glyphicon glyphicon-shopping-cart"></span>Check Out >>
                  </button></td>
            </tr>


          </tbody>
      </table>

    </div>




</form>

My update ajax (in footer)

function update_cart(mode,edit_id){
  var data = {"mode" : mode, "edit_id" : edit_id};
  jQuery.ajax({
    url : '/admin/parsers/update_cart.php',
    method : "post",
    data : data,
    success : function(){location.reload(true);},
    error : function(){alert("Something went wrong.");},
  });
}

and finally my update_cart function

<?php
  require_once $_SERVER['DOCUMENT_ROOT'].'/system/init.php';
  $mode = sanitize($_POST['mode']);
  $edit_id = sanitize($_POST['edit_id']);
  $cartQ = $db->query("SELECT * FROM cart WHERE id = '{$cart_id}'");
  $result = mysqli_fetch_assoc($cartQ);
  $items = json_decode($result['items'], true);
  $updated_items = array();
  $domain =(($_SERVER['HTTP_HOST'] != 'localhost')?'.'.$_SERVER['HTTP_HOST']:false);

  if ($mode == 'removeone') {
    foreach ($items as $item) {
      if ($item['id'] == $edit_id) {
        $item['quantity'] = $item['quantity'] - 1;
      }
      if ($item['quantity'] > 0) {
        $updated_items[] = $item;
      }
    }
  }


  if ($mode == 'addone') {
    foreach ($items as $item) {
      if ($item['id'] == $edit_id) {
        $item['quantity'] = $item['quantity'] + 1;
      }
        $updated_items[] = $item;
    }
  }

if (!empty($updated_items)) {
  $json_updated = json_encode($updated_items);
  $db->query("UPDATE cart SET items = '{$json_updated}' WHERE id = '{$cart_id}'");
  $db->query("UPDATE transactions SET status ='' WHERE cart_id = {$cart_id}");
  $_SESSION['success_flash'] = 'Your shopping cart has been updated!';
}

if (empty($updated_items)) {
  $db->query("DELETE FROM cart WHERE id = '{$cart_id}'");
  setcookie(CART_COOKIE,'',1,"/",$domain,false);
}

 ?>

Answer 1

button without type will submit the form. Your options are adding type="button" or cancelling the onclick event.