weiteres inputfeld bei aktivierter checkbox

priamos · 27.11.2002, 19:02

ich habe ein formular (html,php) für eine dateneingabe.
wenn man auf eine checkbox klickt sollte ein weiters inputfeld erscheinen (oder erst jetzt eine eingabe ermöglichen)

wie könnt ich sowas denn anstellen - per javascript mit onclick?!
wer froh über ein paar tips.

aja, und wenn die checkbox deaktiviert wird - sollt das inputfeld wieder verschwinden

seb · 27.11.2002, 19:41

Das könnte mit Javascript und CSS funktionieren:

Du erstellst dein Input-Element und gibst ihm irgendeine ID, etwa so:

PHP-Code:


			
<input type="text" id="1" />

Mit deiner Checkbox rufst Du bei onClick eine Funktion auf, die deren Zustand (checked / nicht checked) überprüft und entsprechend das CSS-Attribut 'visibility' auf 'visible' oder 'hidden' setzt:

PHP-Code:


			
if (this.checked)

{

document.getElementById(1).style.visibility = 'visible';

}

else

{

document.getElementById(1).style.visible = 'hidden';

}

Ich bin mir nicht ganz sicher, ob dieser Code korrekt ist, insbesondere was die Abfrage des Zustands checked / nicht checked betrifft, aber vom Prinzip her sollts so gehn.
Falls Javascript den 'Trinitären Operator', also die if-Kurzform mit : und ? beherrscht, kann die Sache natürlich noch kürzer aussehn:

PHP-Code:


			
document.getElementById(1).style.visibility = this.checked ? 'visible' : 'hidden';

Wahrscheinlich is hierbei noch irgendwas falsch, ich habs nicht getestet, aber probiers einfach mal aus,

priamos · 27.11.2002, 21:57

also das funkt bei mir leider nicht ...
hat sonst wer vielleicht eine idee, wie ich das hinkriegen könnte?!

Colin Schlüter · 27.11.2002, 22:21

Hallo!

Wie hast du denn den Vorschlag von seb umgesetzt, dass es nicht funktioniert? Da waren zwar noch einige kleinere Fehler drin, aber der Ansatz war doch richtig ...

Ich hab das Ganze jetzt mal ausprobiert und es funktioniert (zumindest im Internet Explorer) soweit auch.
So sieht das dann bei mir aus:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>weiteres inputfeld bei aktivierter checkbox</title>
  <script type="text/javascript">
   <!--
    function doChangeInput() {
      if (document.getElementById('mycheckbox').checked)
        document.getElementById('myinput').style.visibility = 'visible';
      else
        document.getElementById('myinput').style.visibility = 'hidden';
    }
   -->
  </script>
 </head>
 <body>
 <h1>weiteres inputfeld bei aktivierter checkbox</h1>
  <form action="..." method="POST">
   <input type="checkbox" name="check1" id="mycheckbox" onclick="doChangeInput();">
   <input type="text" name="text1" id="myinput" style="visibility: hidden">
  </form>
 </body>
</html>

Löst das dein Problem?

Colin

priamos · 27.11.2002, 22:44

spitze - das funktioniert bestens.

genau so hab ich mir das vorgestellt. DANKE
geht vorerst zwar im netscape nicht - aber das ist eigentlich nicht so ein problem.solangs im explorer funkt bin ich happy.

besten dank

seb · 27.11.2002, 23:23

Okay, klar... 'this' kann hier ja nur dann funktioniern, wenn der Code direkt im Event-Handler-Attribut der Checkbox stehn würde...

Und mit 'gescheiten' Netscape-Versionen (6+) müssts doch auch gehn, oder?

Colin Schlüter · 28.11.2002, 11:01

Zitat:

Original geschrieben von seb
Und mit 'gescheiten' Netscape-Versionen (6+) müssts doch auch gehn, oder?

Ja, müsste es ...
Ich hab den obigen Code jetzt mal in verschiedenen Browsern getestet, es funktioniert soweit in
- Internet Explorer 6
- Netscape 6.2/Netscape 7
- Opera 6

Colin