Click event listener inside a form

Question

I'm trying to add event listener to a button inside a form but for whatever reason it doesn't work the way I want it. When on the other hand I move the button out of the form it starts working.

document.getElementById('a').addEventListener('click', () => {
    document.getElementById('a').style.background = 'red';
})
document.getElementById('b').addEventListener('click', () => {
    document.getElementById('b').style.background = 'red';
})

<form>
<button id="a">test</button>
</form>

<button id="b">test</button>

When I click the button inside the form it turns red for a fraction of second and then goes back to default style. Can someone explain me what causes this behaviour and suggest a solution?

add `type="button"` inside of form button – Muhammad Usman Jul 11 '18 at 08:02 — Muhammad Usman, Jul 11 '18 at 08:02
@GeorgeBailey thanks, that seems to be perfect solution – aMJay Jul 11 '18 at 08:03 — aMJay, Jul 11 '18 at 08:03

score 2 · Accepted Answer · answered Jul 11 '18 at 08:04

The default type of a button is submit. And that's the type of your buttons. And when you click a button with type submit inside a form it submits the form and you see the style reset. You can add type="button" in your button markups and check

document.getElementById('a').addEventListener('click', () => {
 document.getElementById('a').style.background = 'red';
})
document.getElementById('b').addEventListener('click', () => {
 document.getElementById('b').style.background = 'red';
})

<form>
<button id="a" type="button">test</button>
</form>

<button id="b">test</button>

score 0 · Answer 2 · answered Jul 11 '18 at 08:02

use preventDefault(), or assign button type, type="button/submit", if submit use preventDefault(), if button ignore it; default behaviour of button is submit if type not assigned.

document.getElementById('a').addEventListener('click', () => {

 document.getElementById('a').style.background = 'red';
})
document.getElementById('b').addEventListener('click', (e) => {
e.preventDefault();
 document.getElementById('b').style.background = 'red';
})

<form>
<button type="button" id="a">test</button>
</form>

<button id="b">test</button>

score 0 · Answer 3 · answered Jul 11 '18 at 08:03

use preventDefault() function which prevents form from reloading the page!

document.getElementById('a').addEventListener('click', (event) => {
event.preventDefault();
 document.getElementById('a').style.background = 'red';
})
document.getElementById('b').addEventListener('click', () => {
 document.getElementById('b').style.background = 'red';
})

<form>
<button id="a">test</button>
</form>

<button id="b">test</button>

Click event listener inside a form

3 Answers3