Why does my site reload whenever a user clicks a button?
So here is my issue:
I am trying to make a login/signup system for my site.
By default buttons:
- Look ugly
- And automatically reloads the page
Both of those should be a easy fix.
For the look ugly you do some magic with css.
And for the reload page you type
e.preventDefault() in your event listener. But for some reason that won't work for me.
My code gets the signup and login forms then adds the event listener for
submit on there. But for some reason my
e.preventDefault doesn't work. I have tried getting the button from the form and adding the click event listener.
Please help this is driving me insane.
PS: If you need full code I attached the repl. It will be in the
login.signup.js file. Goodluck!
Buttons in forms will automatically change the URL when clicked making it look like the website reloaded.
So add this:
document.querySelector("#signup").addEventListener("click", e => e.preventDefault());
By the way, line 20:
.then(res => res.json())
please take the time to learn the arrow function syntax. Without the curly braces, the immediate expression is returned.
I'm not exactly sure what you want, but if you want a button to not reload and not do anything (like the title of your post), you can put the button in
<a> tags to make it a sort of link and inside the
Are you asking a question about the title(as in "Why does my site reload whenever a user clicks a button?") or the one listed in your description?