dsp77 Posted September 7, 2010 Share Posted 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'; } } Quote Link to comment Share on other sites More sharing options...
Adam Posted September 7, 2010 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 7, 2010 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
dsp77 Posted September 8, 2010 Author Share Posted 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 Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 8, 2010 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.