createElement button seems to submit form instead of function call

Question

So, I've created a button element with javascript. All seems to have went quite well for that.

    var btn = document.createElement("button");
    btn.setAttribute('class', 'btn btn-primary');
    btn.setAttribute('style', 'float: right; display: inline-block; margin-top: 3px; margin-right: 15px;');
    btn.innerHTML = 'Remove Attachment';
    btn.setAttribute('onclick', 'removeAttachment(' + i + ')');

Problem I'm encountering is that when I click the button, it doesn't call the removeAttachment function, but rather seems like it's submitting the page form. Am I missing something with making the button only be bound to the onclick event and not tied to the form?

All I'm really wanting to do is operate on some DOM elements rather than issue a post or get. Any help would be really appreciated. Thanks!

If you place the button inside the page form it automatically becomes ”tied” to the form and works as its submit button by default. The easiest way to fix it is to give the button the attribute `type` with a value of `”button”` — Lennholm, Jul 15 '19 at 17:06
Yeah, but when you force an onclick event handler, doesn't that override the default action? — Skittles, Jul 15 '19 at 17:07
@Lennholm A button doesn't become a submit button by default. — Get Off My Lawn, Jul 15 '19 at 17:08
@Lennholm - THAT was the ticket!!! Adding 'type' attribute fixed the issue. Thank you so much!!! :) — Skittles, Jul 15 '19 at 17:09
No, but you can prevent the default action by invoking the `preventDefault()` method on the event object. That’s another way of solving your problem. — Lennholm, Jul 15 '19 at 17:09
@Lennholm the specs say otherwise: https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type — Get Off My Lawn, Jul 15 '19 at 17:14
@GetOffMyLawn Maybe you should look at that spec one more time. *”The missing value default and invalid value default are the Submit Button state”*. Or even better, just test it for yourself. — Lennholm, Jul 15 '19 at 17:22
Ahh yes okay... I didn't see that... I saw a few lines below where it says `Button: do nothing` I read that as the tag type not attribute. — Get Off My Lawn, Jul 15 '19 at 17:24

Get Off My Lawn · Accepted Answer · 2019-07-15T17:20:57.260

Since you are creating the button using javascript there really isn't a need to add the javascript to the html. So, use addEventListener instead to add a click event to the javascript instead of the HTML.

To prevent the form from submitting, use preventDefault()

btn.addEventListener('click', (e) => {
  e.preventDefault()
  removeAttachment(i)
});

Another option is to set the type of button instead of preventDefault():

btn.type = 'button'

Here is a working example with preventDefault()

var i = 0;

var btn = document.createElement("button");
btn.setAttribute('class', 'btn btn-primary');
btn.setAttribute('style', 'float: right; display: inline-block; margin-top: 3px; margin-right: 15px;');
btn.innerHTML = 'Remove Attachment';
btn.addEventListener('click', (e) => {
  e.preventDefault()
  removeAttachment(i)
});

document.querySelector('form').appendChild(btn)

function removeAttachment(i) {
  console.log('Remove Attachment:', i)
}

<form action="" method="post">

</form>

Here is a working example using type="button"

var i = 0;

var btn = document.createElement("button");
btn.setAttribute('class', 'btn btn-primary');
btn.setAttribute('style', 'float: right; display: inline-block; margin-top: 3px; margin-right: 15px;');
btn.innerHTML = 'Remove Attachment';
btn.type = 'button'
btn.addEventListener('click', (e) => removeAttachment(i));

document.querySelector('form').appendChild(btn)

function removeAttachment(i) {
  console.log('Remove Attachment:', i)
}

<form action="" method="post">

</form>

Awesome suggestion. Unfortunately, it's still acting the same way. I thought, for sure, that this would remedy the issue. — Skittles, Jul 15 '19 at 17:05

createElement button seems to submit form instead of function call

1 Answers1