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.

Answer 2

Use prop instead of attr . It`ll work for sure.

Please look at the below sample code:

$("input[name='email']").focusin(function() {
           console.log("alert");
            $('#email').prop('type','number');
});

Let me know your thoughts on this.

Thanks

Answer 3

So this post was helpful to me, but my solution was to clone the button in question and replace it

$new = $(this).clone();
$new.attr('type','hidden');
$this_form.append($new);
$(this).remove();

Answer 4

I'm not 100% sure what you're asking, but I think you're asking about preventing the submission of a form with a button click in Chrome. If that is the case, why not use preventDefault ?

$("#test").click(function(e) {
  e.preventDefault();
  //more work here....
});

EDIT:
I agree with Nick that in order to do what you are trying to do, go with the straight JavaScript approach. But in that case, you're applying attributes to a button that don't make sense (or at least aren't valid). Since you're already using jQuery, why not handle it properly and prevent the default action of a button click in a form?

Answer 5

jQuery对我来说在Chrome中运行良好...我今天抛出的所有功能都运行得很好，包括.attr（）......