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
No worries! I’m glad you found the example helpful 🙂 Yes, I agree IE really sucks! 😀
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!
Internet Explorer was, is and probably will be hopeless…
$('#password')[0].setAttribute('type','button');@aSeptik
oui… sous firefox cela fonctionne, mais IE ne reconnait pas cette commande.
Hey thanks for this post, was a big help!
finally changed the type of my input field using jquery. thanks!
I ran into an issue with this in IE9. It was still throwing an error saying that the type couldn’t be changed. I found a solution that would allow me to still take off the submit action from the button. Here is what I did:
jQuery(“#Submit”).click(function(event) {
event.preventDefault();
// do what it is you want to
});
This will not modify the type of the button, but it will prevent it from submitting. In the case that I was working on, I needed to run an onClick ajax call before the form submitted. So in using the code up there, I was able to prevent the submit, run my ajax, then submit the form from that function.
Nolan right the following works like a charm:
event.preventDefault();
Thanks…
@Lucian: Amazing solution.