Clicking my button refreshes the page

If your button is inside a form and has no type, it normally acts as a submit button. The browser submits the form and navigates. That can look like a refresh, especially when the form has no action URL.

If the button should only do something on this page

Set type="button". This stops the button's default form submission. Your existing click handler can still run.

<button type="button" id="preview">Preview</button>

This is right for opening a preview, adding a row or showing a password. It is not a replacement for a real submit button when the person needs to send the form.

If the button should submit without navigating

Keep type="submit". Handle the form's submit event, not only the button's click event. This also covers submission with the Enter key.

<form id="contact">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Check email</button>
  <p id="status" role="status"></p>
</form>
<script>
const form = document.querySelector('#contact');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  document.querySelector('#status').textContent =
    'The email format passed the browser check. Nothing was sent.';
});
</script>

This example only checks the browser's email constraint. It does not send or save anything, and it cannot prove that the address exists. A real contact form needs a server endpoint. Show success only after that endpoint confirms the result. Keep server-side validation too.

Check the cause before changing code

Inspect the button's type and its form association. A button outside the form can still submit it through a form attribute. In your browser's Network panel, preserve the log and click the button. A new document request suggests navigation. Check the Console for an error that stopped your event handler from attaching.

If type="button" still navigates, look for a click handler setting location, a call to form.submit(), or a surrounding link. Calling form.submit() directly skips the submit event. Use requestSubmit() when you need normal validation and that event.

After a fix, test both clicking and pressing Enter. Test invalid input too. Do not hide a broken submission by disabling every button or removing the form.

Want this fixed on your page? One agreed HTML or CSS fix costs $29. You keep the code.