Rough Book

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

17 Comments »

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?

   Reply

   Comment by Lucian | February 7, 2010

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.

   Reply

   Comment by vivin | February 7, 2010

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.

   Reply

   Comment by Lucian | February 7, 2010

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

   

   Reply

   Comment by Lucian | February 7, 2010

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

   Comment by vivin | February 7, 2010

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

   Comment by Lucian | February 7, 2010

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

   Reply

   Comment by vivin | February 8, 2010

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

   Comment by stephenrs | April 1, 2010

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

   Comment by vivin | April 2, 2010

10. [...] snippet I found here, which was helpful in building Ekkio’s login [...]

    Pingback by Avishkar's Blog » Cloning and changing the TYPE attribute of an INPUT element | June 27, 2010

11. Internet Explorer was, is and probably will be hopeless…

    Reply

    Comment by Rob | August 11, 2010

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

    Reply

    Comment by aSeptik | January 30, 2011

13. @aSeptik

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

    Reply

    Comment by michon | February 7, 2011

14. Hey thanks for this post, was a big help!

    Reply

    Comment by Angie | February 24, 2011

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

    Reply

    Comment by Catzie | September 29, 2011

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

    Comment by Nolan | September 29, 2011

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

    Thanks…

    Reply

    Comment by viper | December 29, 2011

« Previous | Next »

Site info