How do I stop a site from reloading when a form is submitted?

Coding Help
1

Hey guys, I have a simple form with a submit button:

<form onsubmit="return someFunc()">
<!-- -->
<input type="submit" value="Log In"></submit>
</form>

So the structure of someFunc() is it validates the form, and displays a success animation if the validation returns true. However, I never get to see the animation, because if the form submits correctly, the site reloads. How do I stop this? I looked at StackOverflow, but a bunch of people just suggest turning the input into a plain button (which I don’t want, because the submit button also sends data to the backend).

2

Something like this might work

var form = document.getElementById("myForm");
function handleForm(event) { 
event.preventDefault(); 
} 
form.addEventListener('submit', handleForm);

source

1 Like
3

elem.preventDefault(); might help you with this

2 Likes
4

@Ghostoblivion thanks both of you guys, I’ll be looking at the docs for preventDefault and try it tonight.

1 Like