PHP form submitting when clicking any buttons-CodePudding

currently setting up a form to create a new order within a payment system and when I click any of the buttons within the form the form submits. Anyone know what the issue could be? This is the code with the issue:

     <form action="scripts/php/addorder.php" method="POST">
      <script src="scripts/javascript/cookies.js"></script>
      <script src="scripts/javascript/addproduct.js"></script>
      <label>Choose Customer: </label>
      <input type="text" value="" name="name" id="name" required readonly>
      <button onclick ="window.open('customertable.php','popup','width=600,height=600');">Choose</button>
      <br/>
      <div id="products">
          <label>Products: </label>
          <br/>
          ID: <input type="text" value=" " name="chosenproduct0" id="chosenproduct0" required readonly>
          Name: <input type="text" value=" " name="chosenproduct0name" id="chosenproduct0name" required readonly>
          Price: <input type="text" value=" " name="chosenproduct0price" id="chosenproduct0price" required readonly>
          Quantity: <input type="number" value="1" name="chosenproduct0quantity" id="chosenproduct0quantity" required>
          <button onclick ="findproduct('chosenproduct0');">Choose Product</button>
      </div>
      <br/>
      <label>Discount: </label>
      <input type="number" placeholder="0" name="discount" id="discount" step=".01" min="0">
      <label>Total: </label>
      <input type="number" value="0" name="total" id="total" readonly>
      <button onclick="addproduct()">Add Product</button>
      <br/>
      <input type="submit" id="submit" value="Create New Order" />
      </form>

CodePudding user response：

The default type for a <button> is submit. Explicity set it to button and it shouldn't submit the form by default:

<button type="button" onclick="addproduct()">Add Product</button>

CodePudding user response：

By default, pages are refreshed/forms submitted when buttons are clicked. You can fix this by adding the attribute type="button" to your buttons.

<button type="button" onclick="myFunction()">My button</button>

CodePudding user response：

Prevent using <button> element in the <Form> elements,

By default it's behavior is equivalent to <input type="submit"> element.

So Prefer this

<input type="button" value="Add Product">