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");

Leave a Reply

  1. 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?

  2. @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.

  3. 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.

  4. @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! πŸ™‚

  5. 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!

  6. 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?

  7. Pingback: Avishkar's Blog » Cloning and changing the TYPE attribute of an INPUT element

  8. 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.