is there a way for when i click on a button with onclick event to call a function to stop submitting the form at the same time?

Question

I have a javascript function to show and hide a div with a input element inside and i have a button with a onclick event to call that function, but the problem i am having is that when i click on button to call event it is causing the form to submit at the same time, all i want is call the function and only submit form when i click form submit button

here is a piece of my code, is when i click on this button Try it it ends up submitting the form:

<form action="collection-add.php" method=" post"  id="form" enctype="multipart/form-data">
<!-- 'hidden  fields' section --> 
<input type="hidden" name="collection_id" >


<!-- 'Title field label' section --> 
<div class="form-group">
<label class="col-form-label-lg text-primary"  for="exampleFormControlInput1"><i class="fa-solid fa-circle-info"></i>&nbsp;Info </label>
<!-- title input field -->
<input type="text" name="name"  class="form-control form-control-lg" id="" placeholder="">
</div>

<!-- description field -->
<div class="form-group">
    <label class="col-form-label-lg text-primary"  for="exampleFormControlInput1"><i class="fa-solid fa-audio-description"></i>&nbsp;Description </label>
    <input type="text" name="description"  class="form-control form-control-lg" id="exampleFormControlInput1" >
</div>

<!-- 'link field label' section --> 
<div class="form-group">
<label class="col-form-label-lg text-primary"  for="exampleFormControlInput1"><i class="fa-solid fa-link"></i>&nbsp;Link </label>
<!-- link input field -->
<input type="url" name="link" class="form-control form-control-lg" id="" placeholder="">
</div>


<!-- test -->

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="addlink1()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property 
is set to "none".</p>


<!-- 'link1 field' section --> 
<div class="form-group" id="link1">
<label class="col-form-label-lg text-primary"  for="exampleFormControlInput1"><i class="fa-solid fa-link"></i>&nbsp;Link </label>
<!-- link input field -->
<input type="url" name="link1" class="form-control form-control-lg" id="" placeholder="">
</div>

 <!-- 'BUTTON section --> 
<div>
<button type="submit"  form="form" class="btn btn-primary">Create collection</button>
</div>


<script>
function addlink1() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

Simplest solution: Use `type="button"` so it's not a submit button. — Barmar, Aug 14 '23 at 16:01
You can always prevent the default behaviour of an event by using the [`preventDefault()` method](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) but the cleanest and most straightfoward solution is the one that @Barmar suggested. — secan, Aug 14 '23 at 16:05
i chanhe the form submit button to type submit but still submitting the form at the same time when i click on button to call javascript function — Marcos Almeida, Aug 14 '23 at 16:51
`i chanhe the form submit button to type submit `...that isn't what you were told to do. Change it to `type="button"` — ADyson, Aug 14 '23 at 19:33

is there a way for when i click on a button with onclick event to call a function to stop submitting the form at the same time?

0 Answers0