Setting the "type" attribute of an input does not work with jQuery attr() method

Question

I looked into previous questions, but they didn't seem to answer what's happening to me.
In my real code i'm creating a form on the fly and adding to it two buttons, one for submission and another for other function. For this I'm setting the "type" attribute of the buttons to "submit" for one and "button" for the other. The problem is that in Chrome both buttons submit the form.

Code for the form:

form = $(document.createElement('form')).attr('method', 'get').attr('action', defaults.action).appendTo(object);

Code for the buttons:

form.append(
    $(document.createElement('div')).
        attr('class', classesHash.buttonsContainer).
        append(
            $(document.createElement('button')).
                attr('type', 'submit').
                addClass(classesHash.submitButton).
                attr('title', i18n('Filter')).
                attr('value', i18n('Filter')).
                append(i18n('Filter'))
        ).
        append(
            $(document.createElement('button')).
                attr('type', 'button').
                addClass(classesHash.addButton).
                attr('title', i18n('Add filter')).
                attr('value', i18n('Add filter')).
                append(i18n('Add filter')).
            click(addFilter)
        )
);

I made a more simple test with this HTML code:

<form action="" method="get"><button id="test">test</button></form>

When Chrome doesn't finds a submit button, any button submits the form.

The following doesn't works, the form gets submitted on button click:

$('#test').attr('type', 'button');

The following does works, the form does not submit on button click:

document.getElementById('test').setAttribute('type', 'button');

The form and the button are being generated dynamically and I'm using jQuery so attr() is the most obvious method. Is something wrong with the jQuery core and Chrome's JS specification? It works fine in Firefox. Thanks a lot.

Answer 1

First, the correct approach:
To do what you want in this case, go with the vanilla JavaScript solution, but test it in IE!

---

The why:
The reason type doesn't work is because it fails in IE (you can't chagne the type of an input after it's added to the DOM, and it's handled in this same way), so jQuery throws an error when you try. It does this specifically for <input> and <button> elements when changing the type attribute.

If you look in your console you'll see this:

Error: Uncaught type property can't be changed

Here's a quick test showing this, check the console to see the error jQuery throws.