How to stop button inside form tags from submitting data

Question

Hi I'm trying to make a form taking input of numbers, inside the form I have on input field but with some button for styling the said field, and an anchor tag to send the form to a php file. Clicking one of the buttons send the current value immediately, how to stop that?

<form name="destination" action="../a.php" method="post">
    Quantity : 
    <button onclick="dec('amount')">-</button>
    <input name="amount" type="text" value="0" size = 1>
    <button onclick="inc('amount')">+</button><br><br>
    </form>
<a href="javascript:submitForm()">Details</a> 

Buttons JS:

function inc(element) {
    let el = document.querySelector(`[name="${element}"]`);
    el.value = parseInt(el.value) + 1;
  }
  
  function dec(element) {
    let el = document.querySelector(`[name="${element}"]`);
      if (parseInt(el.value) > 0) {
        el.value = parseInt(el.value) - 1;
    }
  }

Anchor tag JS function:

function submitForm() {
document.destination.submit();
}
</script>```

Answer 1

You can do easily, just include event.preventDefault() in your js code.

event.preventDefault() actually used to prevent(stop) any default event.

function inc(element) {
  event.preventDefault();
  let el = document.querySelector(`[name="${element}"]`);
  el.value = parseInt(el.value) + 1;
}

function dec(element) {
 event.preventDefault();
 let el = document.querySelector(`[name="${element}"]`);
  if (parseInt(el.value) > 0) {
    el.value = parseInt(el.value) - 1;
  }
}

But in case you don't want to use js, you can change buttons default type. Button's default type is submit which will submit the form. You can use type="button"

Answer 2

In html the button's default type id "submit" which will submit forms. To avoid this behavior simply assign a different type

<button type="button">...</button>

https://www.w3schools.com/TAGs/att_button_type.asp