My ajax function is not working, i have tried these codes

Question

So our project is to make an ordering website, we had everything down design-wise. Now that the designing is done, we're now focused to the function of the website. I've done a different approach where i'm able to insert an item into the database but the php page reloads everytime I add an item. I want to make my ordering page be able to add an item and not reload, i've searched on how to do it and it says i have to use a javascript or ajax, this is what i've tried so far as i don't actually know javascript

this is my ordering php page

function onSubmit() {
  $.ajax({
    url: 'inserttocart.php',
    method: 'post',
    data: $("#orderid").serialize(),
    success: function(response) {
      alert(response);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert("Status: " + textStatus);
      alert("Error: " + errorThrown);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="orderid">
  <p><br>Your choice of 1 marinade: </p>
  <input class="chkb1" type="checkbox" name="choice1" value="Bulgogi">&nbsp Bulgogi<br>
  <input class="chkb1" type="checkbox" name="choice1" value="Galbi">&nbsp Galbi<br>
  <input class="chkb1" type="checkbox" name="choice1" value="Gochujang">&nbsp Gochujang<br>
  <input class="chkb1" type="checkbox" name="choice1" value="JRAMS">&nbsp JRAMS Special

  <button class="cart-button" type="button" onclick="onSubmit()" id="addtocartbtn" name="beefbtn">
    <span class="add-to-cart">Add to Cart</span>  
    <span class="added">Added</span>
    <i class="fas fa-shopping-cart"></i>
    <i class="fas fa-box"></i>
  </button>
</form>

This is my inserttocart.php

$connect = mysqli_connect("localhost", "root", "", "pigmedb");
if ($connect == false) {
  die("ERROR: Could not connect. ".mysqli_connect_error());
}
if (isset($_POST['choice1']) && (isset($_POST['beefbtn']))) {
  $marinade = ($_POST['choice1']);

  if ($connect == false) {
    die("ERROR: Could not connect. ".mysqli_connect_error());
  }
  if ($marinade == "Bulgogi") {
    $sqlresult = "SELECT foodname FROM pigme_cart WHERE foodname='Beef Set (Bulgogi Marinated)'";
  }
  elseif($marinade == "Galbi") {
    $sqlresult = "SELECT foodname FROM pigme_cart WHERE foodname='Beef Set (Galbi Marinated)'";
  }
  elseif($marinade == "Gochujang") {
    $sqlresult = "SELECT foodname FROM pigme_cart WHERE foodname='Beef Set (Gochujang Marinated)'";
  }
  elseif($marinade == "JRAMS") {
    $sqlresult = "SELECT foodname FROM pigme_cart WHERE foodname='Beef Set (JRAMS Special Marinated)'";
  }


  $result = mysqli_query($connect, $sqlresult);

  if (mysqli_num_rows($result) > 0) {
    // row exists
    echo "Item Already Added";


    mysqli_close($connect);

  } else {
    if ($marinade == "Bulgogi") {
      $sql = "INSERT INTO pigme_cart(foodname, quantity, price) VALUES ('Beef Set (Bulgogi Marinated)', '1', '399')";
    }
    elseif($marinade == "Galbi") {
      $sql = "INSERT INTO pigme_cart(foodname, quantity, price) VALUES ('Beef Set (Galbi Marinated)', '1', '399')";
    }
    elseif($marinade == "Gochujang") {
      $sql = "INSERT INTO pigme_cart(foodname, quantity, price) VALUES ('Beef Set (Gochujang Marinated)', '1', '399')";
    }
    elseif($marinade == "JRAMS") {
      $sql = "INSERT INTO pigme_cart(foodname, quantity, price) VALUES ('Beef Set (JRAMS Special Marinated)', '1', '399')";
    }
    else {
      echo "Please select one of the marinade of the Beef Set.";

    }

    if (mysqli_query($connect, $sql)) {
      echo "Added to Cart";

    } else {
      echo "ERROR: Could not able to execute $sql. ".mysqli_error($connect);

    }
    mysqli_close($connect);

  }

}

My goal is to prevent the first page from reloading as this is a cart, but at the same time, its able to insert an item into the mysql database. pls help thank you

Answer 1

Buttons aren't included in the result of .serialize(), since it doesn't know which button was clicked. So $_POST['beefbtn'] won't be set.

You can add it yourself.

data: $("#orderid").serialize() + '&beefbtn=1'

Or you could remove that check from the PHP.