PHP form submitting when clicking any buttons

Question

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" class="button"/> </form>

Answer 1

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>

Answer 2

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>

Answer 3

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">