Auswertung von Radiobuttons ohne Submitbutton

[Themm]

Erstmal ein freundliches Hallo an alle. Ich hab ein kleines Problem: Ich möchte 4 Radiobuttons ohne Submit-Button auswerten. Folgende Sprachen sind mir bekannnt: HTML, PHP sowie CSS. Ich hab gehört, dass man Javascript benötigt, deshalb habe ich diesen Thread so eingeordnet. Wenn es wirklich Javascript benötigt und das Erklären zu umständlich ist, würden schon gute Suchbegriffe genügen.
Und noch Danke im Voraus. :)

[tami]

hi,

Erstmal ein freundliches Hallo an alle. Ich hab ein kleines Problem: Ich möchte 4 Radiobuttons ohne Submit-Button auswerten. Folgende Sprachen sind mir bekannnt: HTML, PHP sowie CSS. Ich hab gehört, dass man Javascript benötigt, deshalb habe ich diesen Thread so eingeordnet. Wenn es wirklich Javascript benötigt und das Erklären zu umständlich ist, würden schon gute Suchbegriffe genügen.
Und noch Danke im Voraus. :)

  
<input type="radio" name="radio_test" value="1" onclick="alert(this.value)">  
<input type="radio" name="radio_test" value="2" onclick="alert('wert:' + this.value + 'checked: ' + this.checked)">  

verdeutlicht das prinzip. es es kein korrekter javascript-code, so ins html reingequetscht!

mfg

tami

[Themm]

hi,

Ebenfalls.

<input type="radio" name="radio_test" value="1" onclick="alert(this.value)">
<input type="radio" name="radio_test" value="2" onclick="alert('wert:' + this.value + 'checked: ' + this.checked)">

>   
> verdeutlicht das prinzip. es es kein korrekter javascript-code, so ins html reingequetscht!  

Also mit onclick wird beim Klicken deffiniert (hört sich auch so an :) ). Aber was heißt alert?

[Gunnar Bittersmann]

@@Themm:

nuqneH

Also mit onclick wird beim Klicken deffiniert (hört sich auch so an :) ).

Das ist aber nicht das, was du willst. Wenn der x-te Radiobutton angewählt ist und erneut auf den x-ten Button (bzw. dessen Label!) geklickt wird, soll doch nichts passieren, oder?

Sondern nur, wenn sich der Zustand der Radiobuttons ändert. Das entsprechende Event wäre also 'click' (als Eventhandler-Attribut 'onclick').

Aber was heißt alert?

Wenn du JavaScript verwenden willst, solltest du dich mit den Grundlagen beschäftigen. http://de.selfhtml.org/javascript/index.htm@title=SELFHTML-Doku, SELFHTML-Wiki, molilys Einführung

Qapla'

[Themm]

Ich hab onclick gegooglet; da kam ´raus, dass onchange besser geeignet sei. Aber was soll ich dahinter schreiben damit der Value abgesendet wird?

[Gunnar Bittersmann]

@@Themm:

nuqneH

Ich möchte 4 Radiobuttons ohne Submit-Button auswerten. […] Ich hab gehört, dass man Javascript benötigt

Kommt drauf an. Was genau meinst du mit „auswerten“?

Qapla'

[Themm]

Kommt drauf an. Was genau meinst du mit „auswerten“?

Ich will mittels if abfragen, welcher Radiobutton ausgewählt wurde und dann eine jeweilige Tabelle erscheinen lassen -also keinen Link aufrufen.

[Gunnar Bittersmann]

@@Themm:

nuqneH

Ich will mittels if abfragen […]

Nein. Das ist nicht dein Problem, sondern schon das, was du als Lösung ansiehst.

Ich will […] abfragen, welcher Radiobutton ausgewählt wurde und dann eine jeweilige Tabelle erscheinen lassen

Dafür brauchst du kein JavaScript. Das geht mit CSS: Du lässt alle Tabellen, deren zugehöriger Radiobutton nicht angewählt ist, nicht anzeigen.

HTML:

<input type="radio" name="myRadioGroup" id="ctrl-foo"/><label for="ctrl-foo">foo</label>  
<input type="radio" name="myRadioGroup" id="ctrl-bar"/><label for="ctrl-bar">bar</label>  
<input type="radio" name="myRadioGroup" id="ctrl-baz"/><label for="ctrl-baz">baz</label>  
<table id="foo"> … </table>  
<table id="bar"> … </table>  
<table id="baz"> … </table>

CSS:

#ctrl-foo:not(:checked) ~ #foo,  
#ctrl-bar:not(:checked) ~ #bar,  
#ctrl-baz:not(:checked) ~ #baz  
{  
  display: none;  
}

Zumindest in modernen Browsern.

Qapla'

[tami]

hi,

Dafür brauchst du kein JavaScript. Das geht mit CSS: Du lässt alle Tabellen, deren zugehöriger Radiobutton nicht angewählt ist, nicht anzeigen.

HTML:

<input type="radio" name="myRadioGroup" id="ctrl-foo"/><label for="ctrl-foo">foo</label>

<input type="radio" name="myRadioGroup" id="ctrl-bar"/><label for="ctrl-bar">bar</label>
<input type="radio" name="myRadioGroup" id="ctrl-baz"/><label for="ctrl-baz">baz</label>
<table id="foo"> … </table>
<table id="bar"> … </table>
<table id="baz"> … </table>

>   
> CSS:  
> ~~~css

#ctrl-foo:not(:checked) ~ #foo,  

> #ctrl-bar:not(:checked) ~ #bar,  
> #ctrl-baz:not(:checked) ~ #baz  
> {  
>   display: none;  
> }

Zumindest in modernen Browsern.

Schön!

Viele unschöner, aber zum Grundverständnis von Javascript vielleicht ein Ansatz:

  
divA: <input type="radio" name="radio_test" value="divA"><br>  
divB:<input type="radio" name="radio_test" value="divB">  
<div id="divA" style="display:none">  
divA<br>  
divA<br>  
divA<br>  
divA<br>  
</div>  
<div id="divB" style="display:none">  
divB<br>  
divB<br>  
divB<br>  
divB<br>  
</div>  
<script>  
[code lang=javascript]  
inputFields = document.getElementsByTagName("input");  
hiddenDivs = document.getElementsByTagName("div");  
for (var i=0; i<inputFields.length; i++) {  
	inputFields[i].onchange = function() {  
		for (var j=0; j < hiddenDivs.length; j++) {  
			if(hiddenDivs[j].id === this.value) {  
				hiddenDivs[j].style.display = "block";  
			} else {  
				hiddenDivs[j].style.display = "none";  
			}  
		 }		  
	}  
}  

</script>

[/code]

mfg

tami

[Der Martin]

Hallo,

		if(hiddenDivs[j].id === this.value) {  

  		hiddenDivs[j].style.display = "block";  
  	} else {  
  		hiddenDivs[j].style.display = "none";  
  	}

  
dieses Stückchen ist prädestiniert für den ternären Operator (auch Fragezeichen- oder Auswahloperator genannt). Damit wird es nochmal ein ganzes Stück übersichtlicher:  
  

> `			hiddenDivs[j].style.display = (hiddenDivs[j].id==this.value ? "block" : "none");`{:.language-javascript}  
  
So long,  
 Martin  

-- 
Schon gewusst, dass Aftershave trotz des Namens eigentlich eher fürs Gesicht gedacht ist?  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[tami]

hi,

		if(hiddenDivs[j].id === this.value) {  

  		hiddenDivs[j].style.display = "block";  
  	} else {  
  		hiddenDivs[j].style.display = "none";  
  	}

>   
> dieses Stückchen ist prädestiniert für den ternären Operator (auch Fragezeichen- oder Auswahloperator genannt). Damit wird es nochmal ein ganzes Stück übersichtlicher:  
>   
> > `			hiddenDivs[j].style.display = (hiddenDivs[j].id==this.value ? "block" : "none");`{:.language-javascript}  
>   
  
oder:  
  
~~~javascript
  
inputFields = document.getElementsByTagName("input");  
hiddenDivs = document.getElementsByTagName("div");  
for (var i=0; i<inputFields.length; i++) {  
	inputFields[i].onchange = function() {  
		for (var j=0; j < hiddenDivs.length; j++) {  
			hiddenDivs[j].style.display = "none";  
		 }  
		document.getElementById(this.value).style.display = "block";  
	}  
}  

mfg

tami

[Kai345]

[latex]Mae  govannen![/latex]

Viele unschöner, aber zum Grundverständnis von Javascript vielleicht ein Ansatz:
<script>

inputFields = document.getElementsByTagName("input");
hiddenDivs = document.getElementsByTagName("div");
for (var i=0; i<inputFields.length; i++) {
inputFields[i].onchange = function() {
for (var j=0; j < hiddenDivs.length; j++) {
if(hiddenDivs[j].id === this.value) {
hiddenDivs[j].style.display = "block";
} else {
hiddenDivs[j].style.display = "none";
}
}
}
}

> </script>  
  
Kleine Verbesserungen (außer der von Martin genannten):  
  
Es fehlt jeweils "var" vor inputFields und hiddenDivs.  
Noch besser wäre es, alle verwendeten Variablen am Anfang zu deklarieren,  
bspw.  
  
`var inputFields, hiddenDivs, i; `{:.language-javascript}  
  
oder direkt  
  
~~~javascript
var inputFields = document.getElementsByTagName("input"),  
    hiddenDivs = document.getElementsByTagName("div"),  
    i;

Ansonsten sollte man den display-wert 'block' möglichst immer vermeiden und grundsätzlich '' verwenden, damit ist man dann unabhängig vom Element-Typ (falls man diesen mal wechselt, muß ansonsten das Script ebenfalls angepasst werden).

Daß es insgesamt noch bessere und erweiterte Möglichkeiten gibt, das Problem zu lösen, will ich jetzt nicht weiter ausführen, das wäre dann außerhalb von „Javascript-Grundverständnis“ :)

Stur lächeln und winken, Männer!
Kai

[tami]

hi,

  
  
var inputFields = document.getElementsByTagName("input"),  
    hiddenDivs = document.getElementsByTagName("div"),  
    i,  
    j;  
var changeStyle = function () {  
    "use strict";  
    for (j = 0; j < hiddenDivs.length; j += 1) {  
        hiddenDivs[j].style.display = "none";  
    }  
	document.getElementById(this.value).style.display = "block";  
};  
for (i = 0; i < inputFields.length; i += 1) {  
    inputFields[i].onchange = changeStyle;  
}  
  

So ist es zumindest jslint http://www.jslint.com/ - konform.
Ohne ternären Operator http://de.wikipedia.org/wiki/Bedingte_Anweisung_und_Verzweigung#Auswahloperator.

Daß es insgesamt noch bessere und erweiterte Möglichkeiten gibt, das Problem zu lösen, will ich jetzt nicht weiter ausführen, das wäre dann außerhalb von „Javascript-Grundverständnis“ :)

Wobei im Wiki ja so ein Step-by-Step für ein banales Anfangsbeispiel vermutlich nicht schlecht wäre.

mfg

tami

[Kai345]

[latex]Mae  govannen![/latex]

var inputFields = document.getElementsByTagName("input"),
    hiddenDivs = document.getElementsByTagName("div"),

Vielleicht sollte man noch darauf hinweisen, daß bei umfangreicherem Markup der Seite das document durch eine entsprechende Elementreferenz (gemeinsamer Vorfahre der auszublendenden Elemente; beispielsweise durch document.getElementById ermittelt) ersetzt werden muß, da ansonsten alle divs der Seite weg sind ;)

Stur lächeln und winken, Männer!
Kai

[Matthias Apsel]

Om nah hoo pez nyeetz, tami!

Wobei im Wiki ja so ein Step-by-Step für ein banales Anfangsbeispiel vermutlich nicht schlecht wäre.

<I>

Matthias