# Aus gewähltem Radio-Button Text zuweisen



## AndiB (8. Februar 2014)

Erst mal ein großes Hallo ans Forum,

und nun zu meinem Anliegen.

Ich habe folgende Radio-Buttons:

```
<input type='radio' name='Test' value='test1' checked='checked' onClick="auswahl(1_A)" />
<input type='radio' name='Test' value='test2' onClick="auswahl(2_B)" />
<input type='radio' name='Test' value='test3' onClick="auswahl(3_C)" />
```

Nun bräuchte ich eine Ausgabe des Textes von "auswahl", wenn ein entsprechender Radio-Button ausgewählt wird.

Also wenn jemand auf den zweiten Radio-Button klickt, dann sollte folgendes ausgegeben werden:
"Auswahl 2 an Stelle B wurde ausgewählt"

Der Unterstrich dient hier als Trennzeichen. Diesen kann ich auch anders machen. Standardmäßig ist "1_A" ausgewählt. Hier sollte dann auch der Text von dem Button ausgegeben werden, welcher als "checked" markiert ist. Auch wenn noch nichts gedrückt wurde.

Die Anzahl der Radio-Buttons ist auch unterschiedlich. Mal ist es nur eine und dann auch mal 8. Die Texte "1" oder "A" sind nur Beispiele. Diese werden dann später durch andere Texte ersetzt.

Ich habe leider von JavaScript keine Ahnung, daher wäre es toll, wenn mir hier jeman den entsprechenden Code schicken könnte.

Vielen Dank im voraus.

Gruß
Andi


----------



## tombe (8. Februar 2014)

Ist es immer nur eine Stelle vor und eine Stelle nach dem Unterstrich?


```
function auswahl(wert) {
    meldung = "Auswahl " + wert.substring(0, 1) + " an Stelle " + wert.substring(2) + " wurde ausgewählt.";
    alert(meldung);
}
```


----------



## AndiB (8. Februar 2014)

Hallo tombe,

vielen Dank für deine schnelle Antwort.

Es ist nicht nur eine Stelle. Das werden Zahlen sein, wie z.B. "4,90" oder "136,50".
Die Ausgabe des Textes müsste ich an einer bestimmten Stelle einfügen. Hier müsste ich den auszugebenden Text vielleicht auch noch etwas mit html-Befehlen ergänzen, wie z.B. <b> oder <br/>.

Und wird bei deiner Variante auch die "Standard-Auswahl" direkt angezeigt, auch wenn der Benutzer noch kein Radio-Button angeklickt hat?

Gruß
Andi


----------



## tombe (8. Februar 2014)

Ok, dann mach es so.

<script language="javascript" type="text/javascript">

```
function auswahl(wert) {

trennzeichen = wert.indexOf("_");

meldung = "Auswahl " + wert.substring(0, trennzeichen) + " an Stelle " + wert.substring(trennzeichen + 1) + " ausgewählt.";

document.getElementById("anzeige").innerHTML = meldung;

}
```


```
<input type='radio' name='Test' value='test1' checked='checked' onclick="auswahl('1_A')" />
<input type='radio' name='Test' value='test2' onclick="auswahl('22_b')" />
<input type='radio' name='Test' value='test3' onclick="auswahl('3_CCC')" />
<br/>
<div id="anzeige">Auswahl 1 an Stelle A wurde ausgewählt.</div>
```

Die erste Ausgabe der Meldung wird in einem DIV so vorgegeben. Dadurch steht sie dann beim ersten Anzeigen auch da.
In der Funktion wird zuerst geprüft an welcher Stelle das Trennzeichen "_" im übergebenen Wert vorhanden ist und dann die beiden Ausgaben gebildet.

Wie im Beispiel zu sehen, sind die Stellen vor und nach dem Trennzeichen verschieden.


----------



## AndiB (8. Februar 2014)

Danke, aber leider klappt es nicht.

Ich musste das Trennzeichen ersetzen. Hier habe ich nun das : (Doppelpunkt) genommen. Könnte das ein Problem verursachen? Folgendes habe ich entsprechend geändert:
trennzeichen = wert.indexOf(":");

Wenn ich den Radio-Button ändere, bleibt der Text immer gleich.

Achja, noch was: Der Text, der zu Beginn angezeigt wird (also der checked), darf nicht statisch sein. Dieser Text (Wert) ändert sich. Er muss daher auch vom Radio-Button übernommen werden. Wenn das "checked" nicht verwertet werden kann, dann vielleicht die "value". Hier hat dieser Eintrag immer "value='standard'.


----------



## tombe (8. Februar 2014)

Es spielt absolut keine Rolle ob du den Unterstrich, den Doppelpunkt oder sonst ein anderes Zeichen als Trennzeichen nimmst. Es muss halt im übergebenen Text enthalten sein.

Hier ist das gleiche Beispiel mit Doppelpunkt als Trennzeichen. Dort siehst du auch das der Text geändert wird wenn etwas ausgewählt wird.


----------



## AndiB (8. Februar 2014)

Ich habe den Fehler jetzt gefunden.
Es lag an den zusätzlichen "" bei der Auswahl.

Das funktioniert jetzt auch soweit, nur das mit dem statischen Text, wenn noch nichts ausgewählt wurde, passt noch nicht. Kannst du da noch so machen, oder muss ich hier via PHP schauen ob ich die Daten herbekomme?

Und was passiert hier, wenn JavaScript am Browser deaktiviert ist? Kommt da eine Fehlermeldung?


----------



## tombe (8. Februar 2014)

Was meinst du mit dem "statischen Text"? Die Anzeige wird doch verändert wenn man eine andere Checkbox anklickt.

Da laut deinem HTML-Code die erste Checkbox bereits ausgewählt ist, stimmt es auch was als Meldung zu Beginn angezeigt wird.

Wenn Javascript deaktiviert ist, passiert nichts. Das sollte aber klar sein.


----------



## AndiB (8. Februar 2014)

Mit dem "statischen Text" meine ich den Text der angezeigt wird, wenn man die Seite betritt, sprich noch keine Änderung am Radio-Button durchgeführt hat:
<div id="anzeige">Auswahl 1 an Stelle A wurde ausgewählt.</div>

Da sich dieser Text auch ändert, darf er eben nicht statisch sein.
Aber ich schau mal, ob ich das via PHP machen kann.

Oder hast du da eine Idee?


----------



## tombe (8. Februar 2014)

In dem von dir eingestellten Code ist die erste Checkbox bereits ausgewählt.


```
<input type='radio' name='Test' value='test1' checked='checked' onClick="auswahl(1_A)" />
```

Weiter hast du im ersten Beitrag geschrieben


> Also wenn jemand auf den zweiten Radio-Button klickt, dann sollte folgendes ausgegeben werden: "Auswahl 2 an Stelle B wurde ausgewählt"


Dementsprechend habe ich als "Standardtext" das in den DIV-Container geschrieben was bei der ersten Checkbox übergeben wird "1_A".

Klickt man die zweite oder dritte Checkbox oder die erste erneut an, so wird der ausgegebene Text entsprechend dem Wert der an die Funktion übergeben wird geändert.

Also nochmal die Frage: Was daran stimmt nicht?

NACHTRAG: Ansonsten entferne bei der ersten Ceckbox das sie bereits ausgewählt ist und schreibe in das DIV "Noch kein Eintrag ausgewählt!" Macht aber so gesehen auch keinen Sinn.


----------



## AndiB (8. Februar 2014)

Ich hatte ja geschrieben, dass der Text ausgewählt werden soll, welcher "checked" ist:


> Standardmäßig ist "1_A" ausgewählt. Hier sollte dann auch der Text von dem Button ausgegeben werden, welcher als "checked" markiert ist. Auch wenn noch nichts gedrückt wurde.



Ich habe jetzt das Problem, dass diese Variable des ersten Eintrages, welcher "checked" ist, nicht mehr vorhanden ist, da diese Variable durch das erstellen der anderen Checkboxen überschrieben wird.

Ist es nicht möglich den Wert aus der "checked" Radiobox auszulesen und diesen dann als Standard zu verwenden, wenn noch keine Änderung beim Radio-Button vorhanden ist?


----------



## AndiB (8. Februar 2014)

Ich konnte es jetzt doch via PHP lösen.
Es passt nun alles. Vielen Dank für deine Hilfe.

Gruß
Andi


----------



## AndiB (8. Februar 2014)

Noch eine Frage: Und zwar wird jetzt bei deaktiviertem JavaScript der Standard-Text angezeigt. In diesem Fall ist dies natürlich irreführend. Kann man das irgendwie machen, dass bei deaktiviertem JavaScritp dieser Text nicht angezeigt wird?


----------



## tombe (8. Februar 2014)

Klar kannst du das. Indem du das Anzeigen durch Javascript machst.

Klingt unlogisch ist es aber nicht. Du schreibst nichts in den DIV-Container sondern führst beim Laden der Seite eine Javascript Funkion aus die ihn erst einträgt.

Ist JS aktiv, wird die Funktion ausgeführt und der Text eingetragen. Ist JS abgeschaltet, wird die Funktion nicht ausgeführt und der DIV bleibt leer.

Wobei sich natürlich die Frage stellt, wie die PHP Lösung aussieht. Eventuell geht es dadurch so dann doch nicht. Ohne zu wissen wie du es gelöst hast also keine 100% Hilfe möglich.


----------



## AndiB (8. Februar 2014)

Es ist mit der PHP-Lösung immer noch das DIV, nur dass eben Variablen als Platzhalt sind:

```
<div style="text-align:right; margin:5px; margin-right:20px;" id="gesamt">Text1: '.$tex1.'<br />Text2: '.$text2.'</div>
```

Wie müsste das mit deiner Variante sein?


----------



## tombe (8. Februar 2014)

```
<body onload="document.getElementById('gesamt').innerHTML = 'Wird beim Laden durch JS 
angezeigt';">
	<div id="gesamt">Dieser Text steht hier wenn kein JS ausgeführt wird!</div>
</body>
```

Der DIV Container enthält einen vorgegebenen Text der angezeigt wird wenn Javascript nicht ausgeführt wird. Wenn es aber aktiv ist, wird beim Laden der Seite ein anderer Text eingetragen.

Die PHP Lösung reagiert zwar nicht so schnell auf Änderungen, dafür ist aber sicher das es funktioniert und nicht von außen manipuliert werden kann (zumindest nicht so einfach).


----------



## AndiB (8. Februar 2014)

Ich weis jetzt nicht wirklich, wie ich das machen soll.
Kann ich hier nicht einfach den Text und den Inhalt der PHP-Variable über JavaScript ausgeben?

In der Codestelle komme ich nicht in den Body-Tag.


----------



## AndiB (8. Februar 2014)

Wäre es nicht möglich, dass wir die DIV mit "display:none" machen und das JS nimmt nimmt dies dann raus, wenn es aktiv ist? Ich habe da wirklich keine Ahnung, aber ich hatte mal ein JS-Script welches im Nachhinein einen Teil des HTML-Codes verändert hat. Also müsste doch sowas gehen.

Also:
<div style="display:none; text-align:.....


----------



## AndiB (8. Februar 2014)

Ich habe jetzt eine neues DIV um das vorhanden gelegt:

```
<div id="gesamt_frame">
<div style="display:none; text-align:..... 
</div></div>
```

Mit

```
document.getElementById("gesamt_frame").innerHTML = document.getElementById("gesamt_frame").innerHTML.replace("display:none; ", "");
```

ersetze ich nun den Text in der gesamt_frame.
Das funktioniert auch soweit, nur dass jetzt beim ersten Aufruf (mit aktiviertem JS) wieder nichts angezeigt wird.
Passt also wieder nicht...

Wie könnten wir das machen?
Am besten wäre es meine Meinung nach immer noch, wenn wir bereits beim ersten Aufruf das "checked" mit auswerten und hier dann entsprechend den Text immer mittel JS ausgeben. Wenn dann JS nicht aktiviert ist, wird einfach kein Text ausgegeben.

Ne Idee?


----------



## tombe (9. Februar 2014)

Schau dir doch einfach mal mein Beispiel an wo im body-Tag die onload-Prozedur aufgerufen wird.
Wenn deine Seite korrekten HTML-Code enthält dann gibt es das body-Tag und du kannst es so machen wie ich es dir gezeigt habe. Deine "Lösung" ist viel zu kompliziert.


----------



## AndiB (9. Februar 2014)

Es ist schon im HTML-Code, aber wird via PHP aufgebaut und an dieser Stelle habe ich keinen Zugriff mehr auf die Einleitung des Body-Tags.


----------



## tombe (10. Februar 2014)

Hier findest du ein Beispiel welches beim ersten Laden der Seite prüft welches Optionfeld markiert ist. Davon wird dann der VALUE-Wert genommen und angezeigt! Wird dann ein Optionsfeld angeklickt, wird die Anzeige dementsprechend aktualisiert.

Beim ersten Laden der Seite ist ein "Standardtext" im DIV-Container vorhanden.
Dieser könnte durch PHP-Code erstellt sein oder auch als statischer Text. Ist Javascriot nicht aktiv bleibt dieser Text stehen, ist Javascript aktiv, wird er durch die Funktion überschrieben.


----------



## AndiB (11. Februar 2014)

Das ist auch keine schlechte Idee.
Brauchen wir das "onclick" dann auch noch, oder übernimmt dass das "onload"?

Eine Kombination mit den Angaben die derzeit bei "onclick" stehen ist hier nicht möglich?
Das wäre natürlich dann das Optimale. Wenn das alles über JavaScript angezeigt würde, dann würde hier nie ein falscher Text angezeigt werden.


----------



## tombe (12. Februar 2014)

Irgendwie habe ich das Gefühl als ob du nicht wirklich verstehst wann onload oder onclick ausgelöst wird und was die aufgezeigten Funktionen eigentlich machen.


----------



## AndiB (12. Februar 2014)

Ich hatte ja geschrieben, dass ich von JavaScript nicht wirklich eine Anhnung habe.
Es ist schon klar, dass "onload" beim Laden der Seite ausgeführt wird. Aber ich weis ja nicht, was unter JavaScript alles zum Laden der Seite gehört.


----------



## tombe (12. Februar 2014)

Eben weil du geschrieben hast das du dich nicht gut damit auskennst hätte ich erwartet das du dich schlau machst.

Hier kannst du nachlesen welches Ereignis wann ausgelöst wird.

Das onload-Ereingnis wird genau einmal ausgelöst, nämlich dann wenn die Seite geladen wird. Mit meinem letzten Beispiel wird damit ermittelt welches der Optionsfelder bereits markiert ist und der entsprechende Value-Wert angezeigt.

Das onclick-Ereignis wird immer dann ausgelöst (und muss immer dann ausgelöst werden) wenn ein Optionsfeld angeklickt und somit markiert wird.

Man müsste in meinem Beispiel noch nicht einmal einen Parameter an die Funktion übergeben. Man könnte auch einfach auch nur die For-Anweisung durchlaufen und prüfen welche Auswahl markiert ist.

Das hier würde reichen:


```
function auswahl() {

for (a = 0; a < document.getElementsByName("box").length; a++) {
    if (document.getElementsByName("box")[a].checked == true) {
        document.getElementById("anzeige").innerHTML = document.getElementsByName("box")[a].value;
        exit;
    }
}

}

// Aufruf der Funktion dann einfach so onclick="auswahl()" oder so onload="auswahl()"
```


----------



## AndiB (12. Februar 2014)

Ahh, danke.
Das habe ich jetzt soweit verstanden.

Nun wird ja das "value" angezeigt.
Geht das auch mit den Daten, welche wir bei "onclick" mit aufgeführt haben?
Also diese wieder aufteilen und entsprechend ausgeben.

Für dich ist das vielleicht eine dumme Frage, aber ich bin hier wirklich überfordert...


----------



## tombe (13. Februar 2014)

Dumme Fragen gibt es nicht, nur welche die vielleicht nicht klar genug gestellt sind.

Deshalb hier nochmal ein Beispiel (oder besser gleich zwei). So wie es im Moment ist, wird wieder der bei Value angegebene Wert verwendet.

Wenn du das nicht möchtest, kannst du diese Funktion löschen oder auskommentieren, bei der anderen Funkton die Kommentarzeichen löchen und im Funktionsaufruf (onclick, onload) den entsprechenden Wert angeben.


----------



## AndiB (13. Februar 2014)

Vielen Dank, aber ich habe es jetzt doch anders gemacht.
Ich mache es jetzt mit dem
<div id="gesamt_frame">
<div style="display:none;
...

und lasse das "display:none;" über JavaScript ausblenden.

Danke noch mal.


----------



## tombe (13. Februar 2014)

Ich glaube ich habe da doch so einiges falsch verstanden und mehr gemacht als was du haben willst.

Aber wenn das jetzt eine zufriedenstellende Lösung für dich ist.


----------



## AndiB (13. Februar 2014)

Deine Variante ist sehr gut und es kann durchaus sein, dass ich diese doch noch verwende. Aber da muss ich erst mal drüber nachdenken.


----------

