Prevent form from submitting with certain buttons HTML/JS

Question

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!

We're supposed to know how you mixed up your code to get to such a mess? — Mister Jojo
– Mister Jojo, Commented Mar 28, 2022 at 17:49
Welcome to SO. You might find reading the site help section useful when it comes to asking a good question. To get the best answers to your question we like to see that you've attempted to solve the problem yourself first using a minimal reproducible example. Here's a question checklist you might find useful... — Mister Jojo
– Mister Jojo, Commented Mar 28, 2022 at 17:50

mandy1339 · Accepted Answer · 2022-03-28 17:48:23Z

1

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:

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

answered Mar 28, 2022 at 17:48

mandy1339

5163 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yassine Chettouch · Accepted Answer · 2022-03-28 18:04:16Z

0

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>

answered Mar 28, 2022 at 18:04

Yassine Chettouch

4186 silver badges20 bronze badges

Collectives™ on Stack Overflow

Prevent form from submitting with certain buttons HTML/JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related