CODEWITHSUNDEEP
javascript
Cookie Man
Cookie Man

Reputation: 21

Prevent form from submitting with certain buttons HTML/JS

I am working on a school website, where you can make an assignment. I have a submit button, which is the one that should redirect. I also have some other buttons within this form which are not submit buttons. The problem is, When i click those buttons that i don't want to redirect, it still redirects. What i thought i should do is:

form.addEventListener("submit", (e) =>{
     e.preventDefault();
}

But have realised that that would stop me from submitting at all.

I am not sure what to do. I have tried event.preventDefault for each button, but that doesn seem to work either.

How do i fix this please help I need answers pronto!

Upvotes: 0

Views: 39

Answers (2)

Yassine Chettouch
Yassine Chettouch

Reputation: 388

You can set the button type to 'button' instead of 'submit', but if you insist on using submit you can also use this function to prevent the page from reloading after submitting the form.

<form onsubmit="handleSubmit()">
  Type Something: <input type="text" name="example">
  <input type="submit" value="Submit">
</form>

<script>
  function handleSubmit(e) {
     e.preventDefault();
  }
</script>

Upvotes: 0

mandy1339
mandy1339

Reputation: 516

The HTML buttons can be of three types:

button  The button is a clickable button
submit  The button is a submit button (submits form-data)
reset   The button is a reset button (resets the form-data to its initial values)

You might want to try setting the type of the button to clickable and have just the one submit button.

Hopefully that helps you.

Reference:

Upvotes: 1

Related Questions