toggle multiple elements text/password

dsp77 · September 7, 2010

i have field like <input type="password" value="123" class="pass" id="pass1">

<input type="password" value="123" class="pass" id="pass2"> and so on until pass9.

I have this javascript code

function togglePass() {
    var obj = document.getElementById('pass1');
    if (obj.type == 'text') {
        obj.type = 'password';
    } else {
        obj.type = 'text';
    }
}

it only works with id=pass1 and i dont know how to make it work with all generated passn. i tried

function togglePass() {
    var obj = document.getElementById('pass1');
    var obj = document.getElementById('pass2');
    etc...
    if (obj.type == 'text') {
        obj.type = 'password';
    } else {
        obj.type = 'text';
    }
}

Adam · September 7, 2010

In your second code example you're overwriting the 'obj' variable each time you get an element. Rather than manually creating each element though, just use a loop that will iterate through each of the inputs:

function togglePass() {
    var i = 1;
    while (document.getElementById('pass'+i))
    {
        var obj = document.getElementById('pass'+i);

        if (obj.type == 'text') {
            obj.type = 'password';
        } else {
            obj.type = 'text';
        }

        i++;
    }
}

By the way I was trying to get a solution working that used an array within the name attribute for each input, but ran into more troubles than it's worth.

Psycho · September 7, 2010

This is a good example of where the ternary operator would be useful:

function togglePass() {
    var i = 1;
    while (document.getElementById('pass'+i))
    {
        var obj = document.getElementById('pass'+i);
        obj.type = (obj.type=='text') ? 'password' : 'text';
        i++;
    }
}

NOTE: IE does not recognize the type property.

dsp77 · September 8, 2010

yes it works thanks but as mjdamato says in IE does not work damn

Webpage error details

Message: Could not get the type property. This command is not supported.

Line: 263

Char: 4

Code: 0

<?php
for($i=1;$i<=$num_rows;$i++) {
    echo "
<script type=\"text/javascript\">
    function togglePass".$i."() {
        var obj = document.getElementById('pass".$i."');
        if (obj.type == 'text') {
            obj.type = 'password';
        } else {
            obj.type = 'text';
        }
    }
</script>
";
}
?>
<?php

Psycho · September 8, 2010

So, are you asking for a workaround? Your last post was just a statement, so I'm not sure.

Anyway, IE doesn't recognize the type property, plain and simple. So, there is no way to dynamically change the type of an input field in IE. The only solution, which is a messy one, is to use two sets of fields. One set is password fields and the other is text fields. Then hide one set while displaying the other. Of course you will need to ensure that the values remain the same between both sets as well.

Here is a working solution. I did some testing and didn't find any problems.

<html>
<head>
<script type="text/javascript">
function togglePass() {
    var dispTxt;
    var i = 1;
    while (document.getElementById('pass'+i) && document.getElementById('text'+i))
    {
        var textObj = document.getElementById('text'+i);
        var passObj = document.getElementById('pass'+i);
        //Determine which field is displayed
        dispField = (textObj.style.display=='inline') ? 'text' : 'pass';
        //Swap displayed/hidden fields
        textObj.style.display = (dispField=='text') ? 'none' : 'inline';
        passObj.style.display = (dispField=='pass') ? 'none' : 'inline';
        i++;
    }
    return;
}
function copyInput(fieldObj)
{
    var fldID = fieldObj.id.substr(4);
    var src = (fieldObj.id.substr(0,4) == 'text') ? 'text' : 'pass';
    var tgt = (src == 'text') ? 'pass' : 'text';
    document.getElementById(tgt+fldID).value = document.getElementById(src+fldID).value;
    return;
}

</script>
</head>

<body>
Field 1: 
<input type="text" value="123" id="text1" style="display:none;" onchange="copyInput(this);" />
<input type="password" value="123" class="text" id="pass1" onchange="copyInput(this);" /><br />
Field 2: 
<input type="text" value="123" id="text2" style="display:none;" onchange="copyInput(this);" />
<input type="password" value="123" class="text" id="pass2" onchange="copyInput(this);" /><br />
Field 3: 
<input type="text" value="123" id="text3" style="display:none;" onchange="copyInput(this);" />
<input type="password" value="123" class="text" id="pass3" onchange="copyInput(this);" /><br />
Field 4: 
<input type="text" value="123" id="text4" style="display:none;" onchange="copyInput(this);" />
<input type="password" value="123" class="text" id="pass4" onchange="copyInput(this);" /><br />
Field 5: 
<input type="text" value="123" id="text5" style="display:none;" onchange="copyInput(this);" />
<input type="password" value="123" class="text" id="pass5" onchange="copyInput(this);" /><br />
Field 6: 
<input type="text" value="123" id="text6" style="display:none;" onchange="copyInput(this);" />
<input type="password" value="123" class="text" id="pass6" onchange="copyInput(this);" /><br />
Field 7: 
<input type="text" value="123" id="text7" style="display:none;" onchange="copyInput(this);" />
<input type="password" value="123" class="text" id="pass7" onchange="copyInput(this);" /><br />
Field 8: 
<input type="text" value="123" id="text8" style="display:none;" onchange="copyInput(this);" />
<input type="password" value="123" class="text" id="pass8" onchange="copyInput(this);" /><br />
Field 9: 
<input type="text" value="123" id="text9" style="display:none;" onchange="copyInput(this);" />
<input type="password" value="123" class="text" id="pass9" onchange="copyInput(this);" /><br />

<button onclick="togglePass();">Toggle</button>
</body>
</html>

Sign In

toggle multiple elements text/password

Recommended Posts

dsp77

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

dsp77

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information