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>

Does this answer your question? [How can I submit a form using JavaScript?](https://stackoverflow.com/questions/9855656/how-can-i-submit-a-form-using-javascript) — Sarout, Jan 25 '22 at 19:00
That's what buttons do, by default they are `type="submit"` if you don't specify any different. Change to `type="button"` if you don't want that. And always check the documentation where you can already find this information... https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button . I assume you still want the last "input" button to actually submit though? — ADyson, Jan 25 '22 at 19:01

score 2 · Answer 1 · answered Jan 25 '22 at 19:00

2

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>

answered Jan 25 '22 at 19:00

David

208,112
36
198
279

Upvoted! This is the first, correct answer. I'm not sure how another user got 2 upvotes for basically copying your answer. – HoldOffHunger Jan 25 '22 at 19:51

score 1 · Answer 2 · answered Jan 25 '22 at 19:01

1

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>

answered Jan 25 '22 at 19:01

dandemo

397
1
5

Upvoted! You kept the correct `onclick` in the call. – HoldOffHunger Jan 25 '22 at 19:51

score 0 · Answer 3 · answered Jan 25 '22 at 19:11

0

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

answered Jan 25 '22 at 19:11

Anmol

490
6
8

I'm not sure this is very different from either David's or dandemo's answers? In addition, this no longer calls `addproduct()`. Is there a reason you decided to remove the js event handler? – HoldOffHunger Jan 25 '22 at 19:18
there isn't any reason for that, I have written the answer as a piece of advice on Standard Practices (not as complete solution), then found it later that someone has already answered the Problem – Anmol Jan 25 '22 at 20:11

PHP form submitting when clicking any buttons

3 Answers3