jQuery tip: Changing the TYPE attribute of an INPUT element
I was trying to change the type attribute (using jQuery) of an input element from submit to button when I got this error:
type property can’t be changed
Apparently, you can’t change the type attribute of an input element once it’s part of the DOM. I figured out a way to do it by cloning the old element and then changing its attribute. Since the element isn’t part of the DOM, you can change its attribute. After that, you can add it to the DOM and remove the old element:
var oldButton = jQuery("#Submit");
var newButton = oldButton.clone();
newButton.attr("type", "button");
newButton.attr("id", "newSubmit");
newButton.insertBefore(oldButton);
oldButton.remove();
newButton.attr("id", "Submit");
This is a little bit complicated. In my opinion the best way to fix that is using traditional Javascript (if your input element have an Id attribute). The code can be something like that: document.getElementById(“Submit”).setAttribute(“type”,”button”);
what do you think?
@Lucian
The issue arises when you try to change the type of an element that is already attached to the DOM. So even if you used traditional Javascript, I believe you would run into the same problem.
I’m new in Javascript and jQuery, but this code run correctly. You can test that, in a easy example:
XHTML:
JS:
$(‘input#password’).val(‘Password’);
$(‘input#password’).focus(function(){
if ($(this).val() == ‘Password’){
$(this).val(”);
document.getElementById(‘password’).setAttribute(‘type’, ‘password’);
}
});
I don’t know if mix jQuery with traditional Javascript code is a good practice, but this works! what do you think?
Sorry for my English.
But, but, but, but, this don’t works in IE. In Firefox, Chorme, Opera and Safari works correctly.
@Lucian
Ahh, that’s what the issue is. I remember now. If you try to change the type in IE, it doesn’t work. That’s why I had to perform this workaround… although I could have sworn I had the same issue in Firefox. Hmm… I’ll have to test it again sometime.
In my opinion, if you’re doing anything with the DOM, it’s better to stick to one method. jQuery makes it way easier to manipulate the DOM, than standard Javascript. Also, jQuery abstracts out all the cross-browser code, making it much easier to code
.
No need to apologize for your English!
Yeah, I agree with you, mixed jQuery with Javascript is not a good thing, but I did that because using $(‘input’).attr(‘type’, ‘password’); don’t work in any browser.
Finally, I will use your method to fix that problem, because I want cross-browser code. But at least I learned something new: IE really, really sucks.
Thanks for your time, and your fix!
@Lucian
Yes, I agree IE really sucks! 
No worries! I’m glad you found the example helpful
I used this solution with success in the past, but now it appears that the latest version of jQuery throws an exception when you try to set the type attribute on an element in IE, even if it has not been added to the DOM yet. This seems like a bug in jQuery to me….any ideas for how to get around this?
@stephenrs
Interesting – I have to try this out. I’ll update this post or put up a new post if I figure out how to solve it!