Feld erscheinen lassen

oldputz1990

Erfahrenes Mitglied
Hallo!

Ich bin mir nicht sicher, ob man das mit Javacript lösen kann, aber ich probiers mal:

Ich habe zwei radiobuttons.
<input type="radio" name="zugriff" value="alle"> Alle<br>
<input type="radio" name="zugriff" value="privat"> Privat

Wenn Privat ausgewählt ist, möchte ich, dass darunter noch ein input (text) Feld erscheint, wo mann das Passwort eingibt.

Wie funktioniert das?

Danke!
 
Eine einfache Möglichkeit wäre zum Beispiel das input[type=password] Element
per CSS erst auszublenden, und dann bei onclick auf das radio Element wieder
einzublenden.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>display input</title>
<script type="text/javascript">
<!--
    window.onload = function() {
        var radio = document.getElementById('privat');
        radio.onclick = function() {
            var input = document.getElementById('passwort');
            input.style.display = 'block';
        }
    }
-->
</script>
</head>
<body>
    <form method="post" action="">
        <input type="radio" name="zugriff" value="alle"> Alle<br />
        <input type="radio" name="zugriff" value="privat" id="privat"> Privat<br />
        <input type="password" style="display:none; " id="passwort" />
    </form>
</body>
</html>
 
Hallo!

DANKE!


Das funktioniert mal.

Wie geht dann das, dass wenn man wieder auf "Alle" drückt, dann soll das passwort feld wieder weg sein.

Danke
 
Eben einfach das Feld anstatt auf display:block; auf display:none; setzen.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>display input</title>
<script type="text/javascript">
<!--
    window.onload = function() {
        var radioPrivate = document.getElementById('privat');
        radioPrivate.onclick = function() {
            var input = document.getElementById('passwort');
            input.style.display = 'block';
        }
        var radioAll = document.getElementById('alle');
        radioAll.onclick = function() {
            var input = document.getElementById('passwort');
            input.style.display = 'none';
        }
    }
-->
</script>
</head>
<body>
    <form method="post" action="">
        <input type="radio" name="zugriff" value="alle" id="alle"> Alle<br />
        <input type="radio" name="zugriff" value="privat" id="privat"> Privat<br />
        <input type="password" style="display:none; " id="passwort" />
    </form>
</body>
</html>
 

Neue Beiträge

Zurück