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!
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:
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>