Je nach auswahl, input oder textarea anzeigen lassen!

[DJCueForce]

Hallo,

Ich habe eine "checkbox".
Wenn die "selectet" wird also angeklickt sodass der hacken drinne ist, soll nur ein Input-feld angezeigt werden.
soll ist der hacken allerdings ( standartmäßig ) nicht gesetzt, so soll eine textarea ausgegeben werden.
Wie ist das möglich bzw ist das überhaupt möglich?
PS: die beiden felder sollen im prinzip getauscht werden. also da wo die area ist, soll dann das inputfeld sein. bzw umgekehrt.

MFG
Robin

 

[ComFreek]

Das ist durch Event-Handler möglich.

Du müsstest den Event-Handler onclick nutzen:

<input type="checkbox" onclick="CheckboxClicked()" id="myCheckbox">

Je nach Status der Checkbox (document.getElementById("myCheckbox").checked), machst du dein Inputfeld bzw. deine Textarea sichtbar.
Dazu würde ich aber eine globale Variable verwenden:

var StateOfCheckbox = false;

function CheckboxClicked()
{
  StateOfCheckbox = !StateOfCheckbox;

  if (StateOfCheckbox)
  {
    document.getElementById("textarea").style.visibility = 'visible';
    document.getElementById("input").style.visibility = 'hidden';
  }
  else
  {
    document.getElementById("textarea").style.visibility = 'hidden';
    document.getElementById("input").style.visibility = 'visible';
  }
}

Außerdem würde ich diese globale Variable beim Laden der Seite nochmal abfragen, da einige Browser den Status automatisch setzen.
Dann musst du aber auch die Ansicht (Textarea, Inputfeld) aktualisieren.
Deshalb würde ich einen Klick simulieren, da unser Clickeventhandler aber die Variable immer umkehrt (!StateOfCheckbox), muss man die am Anfang auch umkehren.

window.onload = function()
{
  StateOfCheckbox = !document.getElementById("myCheckbox").checked;
  CheckboxClicked();
}

Ich hoffe, ich habe es einigermaßen gut beschrieben. Falls du Fragen hast, kannst du sie natürlich nochmal hier stellen.

 

[DJCueForce]

Hallo,

vielen dank.

Ich habe nun folgendes problem.
Wenn ich nun einen Hacken in die checkbox mache, wird das inputfeld angezeigt, allerdings wird die Textarea nicht ausgebelndet.

Mein aktueller code:

<script language="javascript">
window.onload = function()
{
  StateOfCheckbox = !document.getElementById("myCheckbox").checked;
  CheckboxClicked();
}

var StateOfCheckbox = false;

function CheckboxClicked()
{
  StateOfCheckbox = !StateOfCheckbox;

  if (StateOfCheckbox)
  {
	document.getElementById("textarea").style.visibility = 'hidden';
    document.getElementById("input").style.visibility = 'visible';
  }
  else
  {
    document.getElementById("textarea").style.visibility = 'visible';
    document.getElementById("input").style.visibility = 'hidden';
  }
}
</script>
<form action="" method="POST" enctype="multipart/form-data">
  <table width="700">
    <tr>
      <td width="82">Headline</td>
      <td width="606"><input type="text" name="textfield" id="textfield"></td>
    </tr>
    <tr>
      <td>Include</td>
      <td><input type="checkbox" onclick="CheckboxClicked()" id="myCheckbox">
        Ja</td>
    </tr>
    <tr>
      <td>String:</td>
      <td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea><input type="text" name="input" id="input"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><input type="hidden" name="hiddenField" id="hiddenField"></td>
      <td><input type="submit" name="button" id="button" value="Senden"></td>
    </tr>
  </table>
</form>

Liegt es evl daran, dass ich TinyMCE Editor benutze?
Kann ich mir allerdings nicht vorstellen.
Danke schonmal.

Gruß!
Robin

 

[DJCueForce]

Hallo,

Nun geht es. Es lag am TinyMCE.
Habe den einfach in ein Div-Tag gepackt.
Gruß
Robin

 

[ComFreek]

Du solltest aber das Skript in den Head packen, denn sonst funktioniert das window.onload nicht (glaube ich)
Anstatt des language-Attributs würde ich das type-Attribut nutzen.
Außerdem würde ich die Variable zuerst deklarieren, macht zwar im Code nichts aus, ist aber übersichtlicher
So sieht es "aufgeräumt" aus:

<head>
  ...
  <script type="text/javascript">
    var StateOfCheckbox = false;
    window.onload = function()
    {
      StateOfCheckbox = !document.getElementById("myCheckbox").checked;
      CheckboxClicked();
    }

    function CheckboxClicked()
    {
      StateOfCheckbox = !StateOfCheckbox;
  
      if (StateOfCheckbox)
      {
    	document.getElementById("textarea").style.visibility = 'hidden';
        document.getElementById("input").style.visibility = 'visible';
      }
      else
      {
        document.getElementById("textarea").style.visibility = 'visible';
        document.getElementById("input").style.visibility = 'hidden';
      }
    }
  </script> 
  ...
</head>

PS: Eventuell würde ich den Checkboxen und den Funktionen sinvollere Namen zuweisen. Also anstatt "myCheckbox" vielleicht "CheckboxIncludeOrString".