"event.preventDefault();" doesn't work with a submit button

Question

The problem is, when I click on a submit button the page is reloading, preventing the code to work, despite the fact that I have "event.preventDefault();".

HTML:

<form class="links-add-container hidden">
  <input
    type="text"
    class="links-name-input links-input"
    spellcheck="false"
    placeholder="Название ссылки"
  />
  <input
    type="text"
    class="links-link-input links-input"
    spellcheck="false"
    placeholder="Ссылка"
  />
  <button class="links-add-button button submit-button" type="submit">
    <i class="fas fa-plus-square"></i>
  </button>
</form>

JS:

const addLinkButton = document.querySelector(".links-add-button");

addLinkButton.addEventListener("click", addLink);

function addLink(event) {
  event.preventDefault();

  //the actual code. It doesn't work because of the page reload.
}

I've tryed to change type of the button on the "button", but it leads to the other problem. The page doesn't reload but the code doesn't work. When i click on the button nothing happens, even error in the console doesn't appear.

I should add that this is my old code and when I worked with it half a year ago there was no such problem. Most likely I'm missing something obvious, but I don't understand what. Please help.

if you want to prevent a submit from happening, you preventDefault on submit event (I think) — Jaromanda X
– Jaromanda X, Commented Nov 29, 2023 at 10:19
@JaromandaX - True, although Chromium, Firefox and iOS Safari (at least) treat preventing the default on a submit button's click as preventing the button from submitting the form it's attached to. I can't find that in the byzantine HTML standard, but I suspect it's there. — T.J. Crowder
– T.J. Crowder, Commented Nov 29, 2023 at 10:24
@Danil - Are you getting an errors in the console? It sounds like your event handler isn't attached to the element, perhaps because you're trying to connect it before the element exists? — T.J. Crowder
– T.J. Crowder, Commented Nov 29, 2023 at 10:25
@T.J.Crowder - yeah, I thought it should work that way ... but was the first thing that popped in my head :p — Jaromanda X
– Jaromanda X, Commented Nov 29, 2023 at 10:25
There are probably more than thousand similar questions already at SO. The standard answer has been: "listen submit event of the form instead". That's been a good answer until now, a relatively recent change to browsers' click handling of inputs type of submit and image, and typeless button makes calling event.preventDefault() in a click handler really prevent the form submission. That was not the case for three years ago. Make sure the submit event is actually attached to the form, not to a submitter element. — Teemu
– Teemu, Commented Nov 29, 2023 at 10:56

Danil Yahin · Accepted Answer · 2023-11-29 11:08:57Z

0

Changing the type of a button to "button" was actually a working solution. The problem was in some kind of local server stuff. When I fixed it, type="button" was a viable solution. Anyway, thank for help.

edited Nov 29, 2023 at 11:08

answered Nov 29, 2023 at 11:07

Danil Yahin

13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

miken32 Over a year ago

This isn't an answer to the question, which was itself fairly unclear. You can simply delete the question instead of posting an answer. As a bonus, you'll get back rep lost to downvotes. You will have to un-accept any accepted answers before deleting your question.

passingThru · Accepted Answer · 2023-11-29 10:55:27Z

-2

To prevent the refresh just add a onsubmit event condition to your form, like this...

<form class="links-add-container hidden" onsubmit="return false;">

Btw, I answered the same request like 2-3 days ago but some people aren’t researching at all! :(

edited Nov 29, 2023 at 10:55

answered Nov 29, 2023 at 10:54

passingThru

212 bronze badges

1 Comment

rlp Over a year ago

Please avoid clutter.

Collectives™ on Stack Overflow

"event.preventDefault();" doesn't work with a submit button

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related