Unable to set `type` on button using attr()

[RSMerrill@…]

While working with buttons I noticed that I cannot explicitly set the type of a button using the jQuery attr().

Demonstration of bug with setting the type on a button element:

​http://jsfiddle.net/Zoramite/9p9F4/2/

On all the buttons the type should be button.

[addyosmani]

A workaround for this would be replacing the actual HTML content for the button or container for the button itself.

Just out of interest, is switching the form element type something you have attempted without using jQuery? I haven't actually seen this attempted before so I'm wondering if its the case that this may not be possible.

Leaving open in case there are further thoughts or comments that can contribute.

[RSMerrill@…]

I updated the sample:

​http://jsfiddle.net/Zoramite/9p9F4/3/

Test using the Static Button Normal JS button.

Testing in Chrome 8.0.552.0 dev on Ubuntu 10.10:

• this.type = 'button'; - Does not change type
• this.setAttribute('type', 'button'); - Changes type to button

Testing in FF 3.6.10 on Ubuntu 10.10:

• this.type = 'button'; - Changes type to button
• this.setAttribute('type', 'button'); - Changes type to button

[RSMerrill@…]

Updated test again:

​http://jsfiddle.net/Zoramite/9p9F4/4/

In IE 8.0.6001.18702 on Windows XP:

• this.type = 'button'; - Throws an error
• this.setAttribute('type', 'button'); - Changes type to button

In Chrome 8.0552.0 dev on Windows XP:

• this.type = 'button'; - Changes type to button
• this.setAttribute('type', 'button'); - Changes type to button

In Safari 5.0.2 on Windows XP:

• this.type = 'button'; - Changes type to button
• this.setAttribute('type', 'button'); - Changes type to button

In Opera 10.62 on Windows XP

• this.type = 'button'; - Changes type to button
• this.setAttribute('type', 'button'); - Changes type to button

[dmethvin]

Older IE does not allow changing the type on a button, for consistency we have been throwing an error on all platforms since 1.4, and still should be in 1.4.3:

​http://github.com/jquery/jquery/blob/master/src/attributes.js#L298

So...why aren't we seeing an error with the test case?

[RSMerrill@…]

So my last set of tests were flawed. The html was specifying the type of button initially.

Updated test:

​http://jsfiddle.net/Zoramite/9p9F4/5/

Results:

Testing in Chrome 8.0.552.0 dev on Ubuntu 10.10:

• Defaults to submit type
• this.type = 'button'; - Does not change type
• this.setAttribute('type', 'button'); - Changes type to button

Testing in FF 3.6.10 on Ubuntu 10.10:

• Defaults to submit type
• this.type = 'button'; - Changes type to button
• this.setAttribute('type', 'button'); - Changes type to button

Testing in IE 6.0.2900 on Windows XP:

• Defaults to button type
• this.type = 'button'; - Throws an Error
• this.setAttribute('type', 'button'); - Changes type to button
• When using html with type="submit" it does not change type using setAttribute()

Testing in IE 7.0.5730.13 on Windows XP:

• Defaults to button type
• this.type = 'button'; - Throws an Error
• this.setAttribute('type', 'button'); - Changes type to button
• When using html with type="submit" it does not change type using setAttribute()

Testing in IE 8.0.6001.18702 on Windows XP:

• Defaults to submit type
• this.type = 'button'; - Throws an Error
• this.setAttribute('type', 'button'); - Changes type to button

Testing in Chrome 8.0552.0 dev on Windows XP:

• Defaults to submit type
• this.type = 'button'; - Does not change type
• this.setAttribute('type', 'button'); - Changes type to button

Testing in Safari 5.0.2 on Windows XP:

• Defaults to submit type
• this.type = 'button'; - Does not change type
• this.setAttribute('type', 'button'); - Changes type to button

Testing in Opera 10.62 on Windows XP

• Defaults to submit type
• this.type = 'button'; - Changes type to button
• this.setAttribute('type', 'button'); - Changes type to button

Testing in FF 3.6.10 on Windows XP

• Defaults to submit type
• this.type = 'button'; - Changes type to button
• this.setAttribute('type', 'button'); - Changes type to button

[RSMerrill@…]

So, from the limited testing that I have done, it looks like the IE6 and IE7 are the ones that do not allow the setAttribute() to change the type.

In my specific case that is fine since it defaults to button on those two versions.

But in general it would not work on those so it should probably through the error to keep things across all browsers consistent.

[snover]

Retargeting due to severity of regressions in 1.4.3.

[dmethvin]

Whether jQuery throws an error or not, it is not possible to change the type of a button cross-browser because IE won't allow it. Any end-user code needs to be written with that in mind. I am thinking jQuery needs to go back to just setting the attribute and letting IE throw whatever fit it wants, rather than trying to special-case this.

[addyosmani]

I agree with dmethvin on this one. As it isn't possible for us to cater for cross-browser type-setting in this case we should allow IE to throw the error MS deems best for this type of situation (unless we just want to throw one ourselves). Thoughts?

[Rick Waldron]

+1 to dmethvin

[SidneySM]

This bug is relevant to my interests.

[Rick Waldron]

To quote dmethvin, "Whether jQuery throws an error or not, it is not possible to change the type of a button cross-browser because IE won't allow it."

[john]

There wasn't a 1.4.5 release, was actually 1.5.

[john]

There was no 1.4.5 release, was actually 1.5.

[Jabes]

I just stumbled upon this issue while working on a project that does not include jQuery, but is still relevant to this case. We do not support IE6 but we do support IE7 so a fix was needed. The fix: set the form button as type="button" and let IE7 default to this type. Then add a click event that submits the parent form. Then handle the form submit event however you like!