zeigen oder verbergen von formularbereichen je nach auswahl

[Susanna]

Hallihallo nochmal,

nachdem ich sanft darauf hingewiesen wurde, dass ich eher bei javascript schauen solle als bei html, habe ich nun eine Frage:

In meinem Formular möchte ich einen Bereich, den ich mit <div> umschlossen habe erst ein- bzw. ausblenden, wenn eine best. checkbox geklickt oder eine best. Select-Option gewählt wurde.

Habe also (übrigens mein erstes javascript - ich bitte um Nachsicht *g*) folgendes "erfunden":

<script type="text/javascript">
<!--
 function Verbergen(was,wie)
     if(wie=="v") {
       document.getElementById(was).style.visibility = "hidden";
     }
     else if(wie=="z") {
       document.getElementById(was).style.visibility = "visible";
     }
//-->
</script>

Im Body steht dann:

Du bist aus <SELECT TABINDEX="1" NAME="land">
              <option VALUE="DE" onSelect="Verbergen("12plz","z")">Deutschland</OPTION>
              <option VALUE="AT" onSelect="Verbergen("12plz","v")">Österreich</OPTION>
            </SELECT>
<div id="12plz">und kommst aus dem PLZ-Bereich <INPUT TYPE="text" TABINDEX="5" NAME="plz" SIZE="1" MAXLENGTH="2"> (bitte erste zwei Ziffern Deiner PLZ)</div>

Nur leider funktioniert das dann nicht. Und ich weiß nicht, was ich da falsch gemacht habe, weil ich ja eigentlich überhaupt keine Ahnung von javascript habe.
Wäre jemand von euch bitte so lieb, mir den Fehler zu zeigen?

Viiiiiiielen Dank,
Susanna

[Dieter Raber]

Hallo Susanna,

Habe also (übrigens mein erstes javascript - ich bitte um Nachsicht *g*) folgendes "erfunden":

Fuer ein erstes sieht das doch schon nett aus, da haben wir wir hier schin viel schlimmeres erlebt

<script type="text/javascript">
<!--
function Verbergen(was,wie)

------------------------------^ Oeffnende Kammer { fehlt

if(wie=="v") {
       document.getElementById(was).style.visibility = "hidden";
     }
     else if(wie=="z") {
       document.getElementById(was).style.visibility = "visible";
     }

Schliessende Klammer } fehlt.

Du bist aus <SELECT TABINDEX="1" NAME="land">

hier muesste es heissen ----------------------^ onchange="Verbergen(deine funktions-parameter)

<option VALUE="DE" onSelect="Verbergen("12plz","z")">Deutschland</OPTION>

onselect hat nichts mit options zu tun, das muss hier weg

Hier kannst Du dich mal schlau machen http://de.selfhtml.org/javascript/objekte/options.htm#selected_index wie man Selectboxen  auswertet.

Gruß,

Dieter

[Susanna]

Hallo Dieter,

Fuer ein erstes sieht das doch schon nett aus, da haben wir wir hier schin viel schlimmeres erlebt

Vielen dank für die Blumen :-)

Habs jetzt mit deinen Tipps umgeschrieben:

<script type="text/javascript">
<!--
 function Verbergen(was,wie) {
     if(wie=="v") {
       document.getElementById(was).style.visibility='hidden';
     }
     else if(wie=="z") {
       document.getElementById(was).style.visibility='visible';
     }
   }
//-->
</script>

Du bist aus <SELECT TABINDEX="1" NAME="land" onChange="Verbergen("12plz","v")">
              <option SELECTED VALUE="DE">Deutschland</OPTION>
              <option VALUE="AT">Österreich</OPTION>
            </SELECT>
<div id="12plz">und kommst aus dem PLZ-Bereich <INPUT TYPE="text" TABINDEX="5" NAME="plz" SIZE="1" MAXLENGTH="2"> (bitte erste zwei Ziffern Deiner PLZ)</div>

Aber es geht nicht weg, wenn ich Österreich auswähle. Warum?
Liebe Grüße,
Susanna

[wahsaga]

hi,

<div id="12plz">

setze doch mal eine gültige ID ein ...

gruß,
wahsaga

[Susanna]

Hallo wahsaga,

<div id="12plz">

setze doch mal eine gültige ID ein ...

danke für den Tipp, jetzt heißt die id "plz12", aber leider, leider tut sich immer noch nichts. Hast du vielleicht eine Idee, warum?

Danke im Voraus und viele Grüße,
Susanna

[Dieter Raber]

Hallo Susanna,

ich finde diese Diskusssion ist mittlerweile etwas unklar geworden, ich versuch deshalb mal, etwas Struktur reinzubringen.
Du sagst im Ausgangsposting, dass ein bestimmter Bereich aufrund der Auswahl einer Selectbox ein-/ausgeblendet werden soll. Dazu musst Du dir klar machen, dass Selectboxen fuer gewoehnlich mit dem onchange-Event ausgewertet werden. Damit auf jeden Fall ein Wechsel (=Change) stattfinden muss, muss die erste Option neutral sein. Da bringt dich zu
<select onchange="function(parameter)">
  <option>-- Bitte etwas auswaehlen --</option>
  <option value="DE">Deutschland</option>
  <option value="AT">Österreich</option>
<select>

Du kannst aus einer Selectbox ohne ein paar Kunstgriffe nur ein Parameter an die Funktion weitergeben, diesem Fall bietet sich 'this' an. 'this' ist eine Referenz auf das Element, das die Funktion in Gang setzt, also die Selectbox.

Dein Select sieht danach so aus:
<select onchange="function(this)">
this steht hier ohne Anfuehrungszeichen, weil es aus der Sicht von Javascript eine Variable ist, kein String.

Bei der Gelegenheit faellt mir dein letztes Posting ein
Sowas:        onChange="Verbergen("12plz","v")"> geht nicht gut,
das geht so:  onChange="Verbergen('12plz','v')">
Ansonsten ist dein String, der Funktion startet hinter dem erstem " zu Ende, faengt hinter 12plz wieder an usw.

Deine Selectbox schickt jetzt this, also sozusagen sich selbst an die Funktion und die kann dann nachschauen, was ausgewaehlt wurde.

function verbergen(sender) //ich nenn das immer 'sender', andere nehmen 'elem', das ist wurscht. Aber es ist wichtig, dass Du dir einen bestimmten Stil angewoehnst und den durchziehst, am besten mal bei andern abkucken.
Also nochmal:

<script type="text/javascript">
function verbergen(sender)
{
  //erstmal schauen, was ausgewaehlt wurde
  var land = sender.value // also DE oder AT
  // jetzt ist es nach meinem Verstaendnis so, das 'plz12' bei der Auswahl von 'DE' angezeigt, bei 'AT' verborgen wird
  if(land == 'DE')
  {
    document.getElementById('plz12').style.visibility = 'visible';
  }
  else //falls es mehr Laender geben, halt mit else if (land == 'CH') oder sowas weitermachen
  {
    document.getElementById('plz12').style.visibility = 'visible';
  }
}

Jetzt fehlt noch die Weitergabe von 'plz12', vermutlich gibt es ja auch 'plz13' und sowas. Das laesst sich in <option> schlecht unterbringen, also machen wir das zB. in der Funktion selbst.
In der Funktion unter die Zeile 'var land...' machst du Arrays mit allen IDs, die fuer jedes Land in Frage kommen.

var plzDE = new Array ('plz12', 'plz13')//oder was immer angezeigt werden soll
var plzAT = usw.

Anstatt der Zeile
document.getElementById('plz12').style.visibility = 'visible';
brauchst Du eine Schleife, die alle relevanten Felder einblendet. Umgekehrt geht auch, du kannst auch diejenigen IDs in Deine Arrays packen, die _ausgeblendet_ werden sollen, je nach dem, was dir besser passt. Loesch also die document.get..-Zeile und ersetze sie durch

for(var i = 0; i < plzDE.length; i++)
{
  document.getElementById(plzDE[i]).style.visibility = 'visible';
}

Die Funktion laeuft damit einmal durch das ganze Array und setzt alle enthaltenen Elemente auf visible. Wie schon erwaehnt, umgekehrt waere auch denkbar.

Das waer's ,ich hab's nicht getestet, aber das sollte hinhauen. Man koennte das noch etwas eleganter machen, aber so finde ich es uebersichtlicher.

Noch ein paar Worte zum Debuggen von Scripten. Der Internet-Explorer ist fuer diese Aufgabe nur eingeschraenkt zu gebrauchen. Meine bevorzugte Kombination ist Firefox mit der Webdeveloper-Extension. Die sagt Dir naemlich sofort, wenn was nicht stimmt und vor allem bekommst Du eine brauchbare Fehlermeldung.

Gruß,

Dieter

[Susanna]

Lieber Dieter!

DU BIST EIN ENGEL!

Vielen lieben Dank für deine lange, ausführliche, detaillierte Erklärung, die sogar einer Neulingin wie mir weitergeholfen haben.
Dank Danke Danke :-)))

Liebe Grüße,
Susanna

[Dieter Raber]

Hallo Susanna,

DU BIST EIN ENGEL!

Huch, die Heiligsprechung hat noch ein bisschen Zeit. Aber es gut, dass du kapiert hast, wie das funktioniert, vielleicht sieht man Dich so ja auch irgenwann mal im Kreis der Fragenbeantworter.

Gruß,

Dieter

[Susanna]

vielleicht sieht man Dich so ja auch irgenwann mal im Kreis der Fragenbeantworter.

...ganz objektiv betrachtet dürfte das noch einige Zeit dauern!
Liebe Grüße,
Susanna

[Cybaer]

Hi,

Aber es geht nicht weg, wenn ich Österreich auswähle. Warum?

Vielleicht weil der Browser bei onChange *das* sieht: "Verbergen("

Du hast keine Funktion Verbergen(. Wenn Du sie hättest, wäre sie nicht gültig. Und wenn Du sie hättest und sie wäre gültig, dann hätte sie keine Parameter. ;-)

Gruß, Cybaer