Change input type with javascript and chechbox, how to?

Question

I would like to create a registration form with hide-able and revealable password input. I tried this (JS):

function showhide(melyik,hol) {
    var melyiket = document.getElementById(melyik);
    var melyikkel = document.getElementById(hol);

    if (melyikkel.value == '1') {
        document.getElementById(melyikkel).value='0';   
        document.getElementById(melyiket).type='password'; 
    } else {
        document.getElementById(melyikkel).value='1';   
        document.getElementById(melyiket).type='text';                 
    } 
}

Form:

<div style="margin-top:20px;">
    <p>SQL host: <input type="text" name="sql_host" value="localhost"/></p>
    <p>SQL adatbázis: <input type="text" name="sql_db"/></p>
    <p>SQL felhasználó: <input type="text" name="sql_user"/></p>
    <p>SQL jelszó: <input type="text" name="sql_password" id="sql_password"/>
        <input type="checkbox" name="show_password_1" id="show_password_1" value="0" onclick="showhide('sql_password','show_password_1');">
    </p>
</div>

I want to do this: If checkbox is checked the password input type is text. When not checked the password type is password... I wrote this JavaScript, but not working. :-(

possible duplicate of Changing the <input> type in IE with JavaScript — jbabey
– jbabey, Commented Jan 3, 2013 at 13:34

Paul Fleming · Accepted Answer · 2013-01-03 13:36:19Z

2

Use .checked to see if the checkbox is selected, not value. Here's a working example.

HTML:

<input type="password" name="pwd" id="pwd" />
<input type="checkbox" name="show" id="show" onclick="showhide('pwd','show');">

JS:

function showhide(pwd,show)
{
    var epwd = document.getElementById(pwd);
    var eshow = document.getElementById(show);

    epwd.type = eshow.checked ? 'text' : 'password';                 

}

answered Jan 3, 2013 at 13:36

Paul Fleming

24.6k8 gold badges79 silver badges113 bronze badges

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

3 Comments

jbabey Over a year ago

Note that changing an input type dynamically is not supported in IE.

Paul Fleming Over a year ago

@jbabey Works fine in IE9.

János Tigyi Over a year ago

IE is piggeon c*ap... :-D I don't use them... But this is it, what i wanted exactly...

Collectives™ on Stack Overflow

Change input type with javascript and chechbox, how to?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related