Skip to content

Rough Book

random musings

Menu
  • About Me
  • Contact
  • Projects
    • bAdkOde
    • CherryBlossom
    • FXCalendar
    • Sulekha
Menu

jQuery tip: Changing the TYPE attribute of an INPUT element

Posted on May 26, 2009September 9, 2009 by vivin

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:

[sourcecode language="javascript"]
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");
[/sourcecode]

18 thoughts on “jQuery tip: Changing the TYPE attribute of an INPUT element”

  1. Lucian says:
    February 7, 2010 at 5:59 am

    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?

    Reply
  2. vivin says:
    February 7, 2010 at 9:21 am

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

    Reply
  3. Lucian says:
    February 7, 2010 at 3:12 pm

    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.

    Reply
  4. Lucian says:
    February 7, 2010 at 3:30 pm

    But, but, but, but, this don’t works in IE. In Firefox, Chorme, Opera and Safari works correctly.

    🙁

    Reply
  5. vivin says:
    February 7, 2010 at 4:18 pm

    @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! 🙂

    Reply
  6. Lucian says:
    February 7, 2010 at 7:03 pm

    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!

    Reply
  7. vivin says:
    February 8, 2010 at 4:42 pm

    @Lucian
    No worries! I’m glad you found the example helpful 🙂 Yes, I agree IE really sucks! 😀

    Reply
  8. stephenrs says:
    April 1, 2010 at 4:50 pm

    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?

    Reply
  9. vivin says:
    April 2, 2010 at 5:15 pm

    @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!

    Reply
  10. Pingback: Avishkar's Blog » Cloning and changing the TYPE attribute of an INPUT element
  11. Rob says:
    August 11, 2010 at 7:56 am

    Internet Explorer was, is and probably will be hopeless…

    Reply
  12. aSeptik says:
    January 30, 2011 at 8:05 am

    $('#password')[0].setAttribute('type','button');

    Reply
  13. michon says:
    February 7, 2011 at 7:44 am

    @aSeptik

    oui… sous firefox cela fonctionne, mais IE ne reconnait pas cette commande.

    Reply
  14. Angie says:
    February 24, 2011 at 11:16 am

    Hey thanks for this post, was a big help!

    Reply
  15. Catzie says:
    September 29, 2011 at 12:04 am

    finally changed the type of my input field using jquery. thanks!

    Reply
  16. Nolan says:
    September 29, 2011 at 10:58 am

    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.

    Reply
  17. viper says:
    December 29, 2011 at 6:08 am

    Nolan right the following works like a charm:
    event.preventDefault();

    Thanks…

    Reply
  18. faridlab says:
    January 21, 2013 at 7:42 am

    @Lucian: Amazing solution.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Archives

  • February 2023
  • April 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • June 2017
  • March 2017
  • November 2016
  • August 2016
  • July 2016
  • June 2016
  • February 2016
  • August 2015
  • July 2014
  • June 2014
  • March 2014
  • December 2013
  • November 2013
  • September 2013
  • July 2013
  • June 2013
  • March 2013
  • February 2013
  • January 2013
  • October 2012
  • July 2012
  • June 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • July 2011
  • June 2011
  • May 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • August 2008
  • March 2008
  • February 2008
  • November 2007
  • July 2007
  • June 2007
  • May 2007
  • March 2007
  • December 2006
  • October 2006
  • September 2006
  • August 2006
  • June 2006
  • April 2006
  • March 2006
  • January 2006
  • December 2005
  • November 2005
  • October 2005
  • September 2005
  • August 2005
  • July 2005
  • June 2005
  • May 2005
  • April 2005
  • February 2005
  • October 2004
  • September 2004
  • August 2004
  • July 2004
  • June 2004
  • May 2004
  • April 2004
  • March 2004
  • February 2004
  • January 2004
  • December 2003
  • November 2003
  • October 2003
  • September 2003
  • July 2003
  • June 2003
  • May 2003
  • March 2003
  • February 2003
  • January 2003
  • December 2002
  • November 2002
  • October 2002
  • September 2002
  • August 2002
  • July 2002
  • June 2002
  • May 2002
  • April 2002
  • February 2002
  • September 2001
  • August 2001
  • April 2001
  • March 2001
  • February 2001
  • January 2001
  • December 2000
  • November 2000
  • October 2000
  • August 2000
  • July 2000
  • June 2000
  • May 2000
  • March 2000
  • January 2000
  • December 1999
  • November 1999
  • October 1999
  • September 1999
©2023 Rough Book | Built using WordPress and Responsive Blogily theme by Superb
All original content on these pages is fingerprinted and certified by Digiprove