How do I make an HTML button not reload the page

user_69803 0
Viewed 351652

I have a button (<input type="submit">). When it is clicked the page reloads. Since I have some jQuery hide() functions that are called on page load, this causes these elements to be hidden again. How do I make the button do nothing, so I can still add some action that occurs when the button is clicked but not reload the page.

dom-events button html
10 Answers

You could also use JavaScript for that:

  let input = document.querySelector("input");
  input.addEventListener("submit", (event) => {
    event.preventDefault();
  })
user_141496900

Use

event.preventDefault()

in the first line of your event function.

Buttons must be of the type button and contain type="submit" in the button html.

user_178384550
Related