Refactor replace within jquery

Question

Working version http://jsfiddle.net/uxBZN/

Would it be better to just replace password or text within the type (type="password") parameter of html input tag, instead of the whole html input type tag, as seen below?

$("#unhide_typing").live("click", function(){
    var security_answer = $("#security_answer").val();
    var hnumber = $("#hnumber").val();

    if ($('#unhide_typing').is(':checked')) {
        $("#security_answer").replaceWith('<input type="text" name="answer" value="'+security_answer+'" id="security_answer">');
        $("#hnumber").replaceWith('<input type="text" name="hnumber" value="'+hnumber+'" id="hnumber">');
    } else {
        $("#security_answer").replaceWith('<input type="password" name="answer" value="'+security_answer+'" id="security_answer">');
        $("#hnumber").replaceWith('<input type="password" name="hnumber" value="'+hnumber+'" id="hnumber">');
    }
});

This needs to work with IE 7/8 and I want to retain the currently entered text.

It seems to me that you're asking if you can change the type property of the existing input element instead of creating a new element. Is that what you mean? — user1106925
– user1106925, Commented Mar 2, 2012 at 16:27
Your accepted answer doesn't change the existing element, but is just an alternate way of doing what you're already doing. Now replacing the element entirely is probably necessary for browser compatibility, but it isn't accomplishing anything different. — user1106925
– user1106925, Commented Mar 2, 2012 at 16:47
...remember that on the client side, you're not working with HTML, but rather with DOM elements. jQuery just tricks you into thinking you're working with HTML. — user1106925
– user1106925, Commented Mar 2, 2012 at 16:48

ShankarSangoli · Accepted Answer · 2012-03-02 16:21:59Z

2

Yes, you can do that.

$("#unhide_typing").live("click", function(){
  var security_answer = $("#security_answer").val();
  var hnumber = $("#hnumber").val();
  var type = $(this).is(':checked') ? "text" : "password";

  $("#security_answer").replaceWith('<input type="' + type + '" name="answer" value="'+security_answer+'" id="security_answer" />');
  $("#hnumber").replaceWith('<input type="' + type + '" name="hnumber" value="'+hnumber+'" id="hnumber" />');
});

Note: Inside the handler you can use this to refer to #unhide_typing and also if you are using jQuery ver 1.7+ then it is preferrable to use on instead of live.

answered Mar 2, 2012 at 16:21

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christopher Ramírez · Accepted Answer · 2012-03-02 16:30:17Z

0

Replacing some properties of HTML elements with jQuery could be tricky on older versions. I recommend you to stay with .prop() function and do not replace DOM elements.

So, your code should be this:

$("#unhide_typing").live("click", function(){

    var security_answer = $("#security_answer").val();
    var hnumber = $("#hnumber").val();

    if ($('#unhide_typing').is(':checked')) {
        $('#security_answer').prop('type', 'text');
        $('#hnumber').prop('type', 'text');
    } else {
        $('#security_answer').prop('type', 'password');
        $('#hnumber').prop('type', 'password');
    }
});

answered Mar 2, 2012 at 16:30

Christopher Ramírez

1,72010 silver badges13 bronze badges

Comments

maxedison · Accepted Answer · 2012-03-02 16:31:01Z

0

Yes, it's better to just replace the type for a number of reasons:

Better performance (an element isn't getting removed and then a new one getting created/inserted into the DOM)
Doesn't break the browser's built-in undo mechanism (probably not critical for this use-case, but perhaps it is in others).
Any other event handlers bound to the original input won't get removed

Just make sure you use jQuery's .prop() method rather than .attr():

http://jsfiddle.net/uxBZN/2/

answered Mar 2, 2012 at 16:31

maxedison

17.6k15 gold badges72 silver badges118 bronze badges

Collectives™ on Stack Overflow

Refactor replace within jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related