Value von Radiobutton dynamisch belegen

M

marvin69

Grünschnabel
Hallo,

habe mich an einem Problem verbissen: In folgendem Beispiel möchte ich _fest_ vergebenen Values der Radiobuttons entsprechend des ermittelten Indexes des ausgewählten Radiobuttons - hier nur 0 oder 1 - zuordnen. Also Radiobutton[i]=1 -> a=Preis[1], sprich .value durch Preis[i] ersetzen. Geht so etwas? :confused:

Vielen Dank.

HTML: 
<head>
<script type="text/javascript">

var Preise = "3.50 5.50 9.00 11.00 13.00";
var Preis = Preise.split(" ");

function auswahl()
{
  var i,a="";

   /* jeden Radiobutton abchecken : */
  for (i=0;i<2;i++)
    if (document.demo.elements[i].checked)
      a=document.demo.elements[i].value;

   /* Text im Ausgabefeld setzen : -- nur zu Kontrollzwecken*/
  document.demo.anzeige.value=a;
}

</script>                      
</head>

<body onLoad="auswahl();">
<br>

<form name="demo">

<input type=radio name="punkte" value="A" onClick="auswahl()">A<br>

<input type=radio name="punkte" value="B" onClick="auswahl()">B<br>

<input type=text name="anzeige" value="" size="15" readonly>

</form>
</body>
 
Hi,

mal sehen, ob ich dein Problem richtig verstanden habe:
Es soll dem aktuell angewählten Radiobutton im value-Attribut der entsprechende Wert aus dem
Preis-Array zugewiesen werden. Alle anderen Radiobuttons bekommen ihre Ausgangswerte (A, B, ...)
wieder.
Code: 
var Preise = "3.50 5.50 9.00 11.00 13.00";
var Preis = Preise.split(" ");

// Array mit den Ausgangswerten
var arrValues = new Array("A", "B", "C", "D", "E");

function auswahl(objRadio){
  var i,a="";
  var strOut = "";  // Zu Testzwecken

  // Array aus allen Elementen erstellen, die den gewünschten Name besitzen
  objRadio = document.getElementsByName(objRadio.name);
  /* jeden Radiobutton abchecken : */
  for (i=0; i<objRadio.length; i++){
    // Falls der Radiobutton gechecked ist
    if (objRadio[i].checked){
      a = Preis[i];
      // Preis an entsprechender Komponente dem value-Attribut zuweisen
      objRadio[i].value = Preis[i];
      strOut += (i+1) + ". Radiobutton: value = " + objRadio[i].value + "\n";  // Zu Testzwecken
    }else{
      // Standardwert wieder zuweisen
      objRadio[i].value = arrValues[i];
      strOut += (i+1) + ". Radiobutton: value = " + objRadio[i].value + "\n";  // Zu Testzwecken
    }
  }

  /* Text im Ausgabefeld setzen : -- nur zu Kontrollzwecken*/
  document.demo.anzeige.value = a;

  alert(strOut);  // Zu Testzwecken
}
Die Zeilen, die mit "// Zu Testzwecken" abgeschlossen werden, können gelöscht werden. Sie dienen
lediglich zur Veranschaulichung, welche Werte die einzelnen Radiobuttons nach dem Durchlauf
der Funktion besitzen.

Der zugehörige HTML-Code könnte folgendermassen aussehen:
HTML: 
<form name="demo">
  <input type=radio name="punkte" value="A" onclick="auswahl(this)">A<br>
  <input type=radio name="punkte" value="B" onclick="auswahl(this)">B<br>
  <input type=radio name="punkte" value="C" onclick="auswahl(this)">C<br>
  <input type=text name="anzeige" value="" size="15" readonly>
</form>
Ich hoffe, dein Problem richtig verstanden zu haben.

Ciao
Quaese
 
Hallo Quaese!

Dankeschön, sieht sehr gut aus. Es funktioniert wie ich es mir vorgestellt habe. Nun kommt aber noch die hohe Kunst: Ich muß dieses Formular dreimal nebeneinander darstellen und abfragen. Das Preis-Array verändert sich dabei nicht. Ich stelle mir dazu eine äußere Schleife vor, die die vorhandenen Formulare demo1, demo2 und demo3 abfragt und damit die Variablen a, b und c belegt.

Könntest Du mir bitte diesbezüglich helfen?

Apropos, die Belegung der nicht ausgewählten Radiobuttons könnte ruhig "Null" sein.

Gruß, Thomas
 
Hi,

die nicht ausgewählten Radiobuttons werden jetzt mit einem Leerstring ("") belegt.

Es werden nicht die Variablen a, b und c belegt. Stattdessen habe ich ein Array (arrFormValues)
erstellt, dessen Schlüssel die Formularnamen sind. Als Wert bekommen sie den aktuell ausgewählten
Preis zum Radiobutton zugewiesen.
Mit Hilfe dieses Arrays werden auch die drei Formulare durchlaufen - for-in-Schleife.

Javascript:
Code: 
var Preise = "3.50 5.50 9.00 11.00 13.00";
var Preis = Preise.split(" ");

// Formular-Array für Werte
var arrFormValue = new Array();
arrFormValue["demo1"] = "";
arrFormValue["demo2"] = "";
arrFormValue["demo3"] = "";

function auswahl(objRadio){
  var strOut = "";  // Zu Testzwecken

  // Formulare durchlaufen
  for(var strForm in arrFormValue){
    strOut += "\nFormular - " + strForm + "\n";  // Zu Testzwecken

    // Radiobutton-Gruppe des aktuellen Formulars ermitteln
    objHelp = document.getElementsByName(strForm)[0].elements[objRadio.name];

    // Falls nur ein Radiobutton in der Gruppe enthalten ist
    if(typeof objHelp.length == "undefined"){
      // Falls der Radiobutton gechecked ist
      if (objHelp.checked){
        arrFormValue[strForm] = Preis[0];
        // Preis an entsprechender Komponente dem value-Attribut zuweisen
        objHelp.value = Preis[0];
        strOut += "1. Radiobutton: value = " + objHelp.value + ", mit arrFormValue['"+strForm+"'] = "+arrFormValue[strForm]+"\n";  // Zu Testzwecken
      }else{
        // Standardwert wieder zuweisen
        objHelp.value = "";
        strOut += "1. Radiobutton: value = " + objHelp.value + "\n";  // Zu Testzwecken
      }  // ENDE - if (objHelp.checked)

    // Falls mindestens zwei Radiobuttons in der Gruppe enthalten sind
    }else{

      // Alle Radiobuttons durchlaufen
      for (var i=0; i<objHelp.length; i++){

        // Falls der Radiobutton gechecked ist
        if (objHelp[i].checked){
          arrFormValue[strForm] = Preis[i];
          // Preis an entsprechender Komponente dem value-Attribut zuweisen
          objHelp[i].value = Preis[i];
          strOut += (i+1) + ". Radiobutton: value = " + objHelp[i].value + ", mit arrFormValue['"+strForm+"'] = "+arrFormValue[strForm]+"\n";  // Zu Testzwecken
        }else{
          // Standardwert wieder zuweisen
          objHelp[i].value = "";
          strOut += (i+1) + ". Radiobutton: value = " + objHelp[i].value + "\n";  // Zu Testzwecken
        }  // ENDE - if (objHelp[i].checked)

      }  // ENDE - for (var i=0; i<objHelp.length; i++)

    }  // ENDE - if(typeof objHelp.length == "undefined")

    /* Text im Ausgabefeld setzen : -- nur zu Kontrollzwecken*/
    document.getElementsByName(strForm)[0].anzeige.value = arrFormValue[strForm];
  }

  alert(strOut);  // Zu Testzwecken
}
Und der zugehörige HTML-Bereich:
HTML: 
<form name="demo1">
	<input type=radio name="punkte" value="A" onclick="auswahl(this)">A<br>
	<input type=radio name="punkte" value="B" onclick="auswahl(this)">B<br>
	<input type=radio name="punkte" value="C" onclick="auswahl(this)">C<br>
	<input type=text name="anzeige" value="" size="15" readonly>
</form>

<form name="demo2">
	<input type=radio name="punkte" value="A" onclick="auswahl(this)">A<br>
	<input type=radio name="punkte" value="B" onclick="auswahl(this)">B<br>
	<input type=radio name="punkte" value="C" onclick="auswahl(this)">C<br>
	<input type=text name="anzeige" value="" size="15" readonly>
</form>

<form name="demo3">
	<input type=radio name="punkte" value="A" onclick="auswahl(this)">A<br>
	<input type=text name="anzeige" value="" size="15" readonly>
</form>
Edit:
Das Script funktioniert nun auch korrekt, wenn die Radiobutton-Gruppe aus nur einem Element
besteht.

Ciao
Quaese
 
Zuletzt bearbeitet:
Hi Quaese,

sieht gut aus! Mehr kann ich dazu nicht sagen - die Kopfnuß muß ich jetzt erst einmal knacken. Vielen Dank für die prompte Hilfe.

Gruß, Thomas
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück