Homepage de.comp.lang.javascript
Homepage
de.comp.lang.javascript

FAQ de.comp.lang.javascript

FAQ
de.comp.lang.javascript

 

 

Bitte verwenden Sie als Einstiegsadresse in diese FAQ die Homepage der Newsgroup de.comp.lang.javascript. Der Aufenthaltsort dieser Seiten hier kann sich ohne Vorwarnung ändern.
 

 

Wie kann ich Radio- und Select-Objekte auswerten?

Während auf die value-Eigenschaft eines Text-Inputs einfach über (z.B.) document.myForm.myText.value zugegriffen werden kann, muß man bei Radio- und Select-Objekten ein wenig mehr Aufwand treiben. Hier besitzt jede Auswahlmöglichkeit eine eigene Eigenschaft value, und man muß zunächst über die Eigenschaften checked (Radio-Objekt), selectedIndex oder selected (Select-Objekt) feststellen, welche Auswahl getroffen wurde.

 

Radio-Objekt

Das folgende Formular "myForm" besteht aus einem Radio-Objekt "myRadio" (bestehend aus drei Radio-Buttons) sowie einem Button zum Aufrufen der Auswertfunktion. Jeder der Radio-Buttons verfügt hier über eine eigene Eigenschaft value:

<form name="myForm">
  <input type="radio" name="myRadio" value="wert1">&nbsp;Text1&nbsp;&nbsp;
  <input type="radio" name="myRadio" value="wert2">&nbsp;Text2&nbsp;&nbsp;
  <input type="radio" name="myRadio" value="wert3">&nbsp;Text3&nbsp;&nbsp;
  <input type="button" value="Test"
         onClick="alert(radioWert(document.myForm.myRadio));">
</form>
 Text1    Text2    Text3  

Durch Klicken auf den Button "Test", wird der Rückgabewert der Funktion radioWert() (diese steht im Header der Seite) in einer Alertbox angezeigt. Die Funktion geht solange die Elemente des übergebenen Radio-Objekts durch, bis sie auf eines stößt, dessen Eigenschaft checked gleich true ist - dessen Eigenschaft value gibt sie dann zurück. Ist kein Button ausgewählt, wird false zurückgegeben:

  function radioWert(rObj) {
    for (var i=0; i<rObj.length; i++) if (rObj[i].checked) return rObj[i].value;
    return false;
  }
 

Select-Objekt mit Einfachauswahl

Das folgende Formular "myForm" besteht aus einem Select-Objekt "mySelect" (mit drei Optionen) sowie einem Button zum Aufrufen der Auswertfunktion. Jede Option verfügt hier über eine eigene Eigenschaft value:

<form name="myForm">
  <select name="mySelect">
    <option value="wert1">Text1
    <option value="wert2">Text2
    <option value="wert3">Text3
  </select>
  <input type="button" value="Test"
         onClick="alert(selectWert(document.myForm.mySelect));">
</form>

Durch Klicken auf den Button "Test", wird der Rückgabewert der Funktion selectWert() (diese steht im Header der Seite) in einer Alertbox angezeigt. Die Funktion benutzt die Eigenschaft selectedIndex des übergebenen Select-Objekts, um die Eigenschaft value der ausgewählten Option zurückzugeben. Die Möglichkeit, keine Auswahl zu treffen, besteht hier nicht. Um Tipparbeit zu sparen, wird eine with-Anweisung benutzt:

  function selectWert(sObj) {
    with (sObj) return options[selectedIndex].value;
  }
 

Select-Objekt mit Mehrfachauswahl

Das folgende Formular ist genauso aufgebaut wie das vorherige, mit dem Unterschied, daß das Select-Objekt hier mit dem Attribut multiple versehen ist. Dadurch kann der User auch mehrere Optionen (oder keine) aus der Liste auswählen (in der Regel geschieht das mit gedrückter Strg- bzw. Ctrl-Taste):

<form name="myForm">
  <select name="mySelect" multiple size=3>
    <option value="wert1">Text1
    <option value="wert2">Text2
    <option value="wert3">Text3
  </select>
  <input type="button" value="Test"
         onClick="alert(multipleWert(document.myForm.mySelect, '&'));">
</form>

Durch Klicken auf den Button "Test", wird der Rückgabewert der Funktion multipleWert() (diese steht im Header der Seite) in einer Alertbox angezeigt. Die Funktion benutzt die Eigenschaft selected jeder einzelnen Option des übergebenen Select-Objekts, um die value-Eigenschaften aller ausgewählten Optionen zu einem String zusammenzufügen und zurückzugeben. Der Inhalt des zweiten übergebenen Parameters wird als Trennzeichen (oder -string) benutzt. Wurde keine Option ausgewählt, wird ein Leerstring zurückgegeben:

  function multipleWert(sObj, trenn) {
    var rVal = '';
    for (var i=0; i<sObj.options.length; i++) with (sObj.options[i])
      if (selected) rVal += trenn + value;
    return rVal.substring(trenn.length);
  }
top

Diese Seite ist Teil der de.comp.lang.javascript FAQ. Die Einstiegsadresse lautet http://www.dcljs.de/. Der Text der Seite wurde erstellt von Dietmar H. G. Meier (©).

 ______ letzte Änderung: 12/2012 ______ 

 
© S. Mintert, Ch. Kühnel