[FRAGE] JavaScript RadioButton mit Event

[Moritz123]

Hallo zusammen,

ich versuche gerade eine Funktionalität meiner Webseite via JavaScript zu lösen, da ich mich aber zu wenig mit Syntax und Logik auskenne, wollte ich mal bei Experten nachfragen.

Ich will folgendes machen:

Über Radio-Buttons setze ich verschiedene Stati, von denen aber immer nur einer gleichzeitig sein kann. Je nach Status wird an einer anderen Stelle ein bestimmter Shortcode ausgeführt und eine Zeichenkette wird angezeigt.

<form name=Meine Stati>
<input type="radio" name=myradio value="1" checked>Status 1
<input type="radio" name=myradio value="2" >Status 2
<input type="radio" name=myradio value="3" >Status 3
</form>

Das Script soll nun einfach prüfen, welcher der Radios auf "checked" gesetzt ist und in Abhängigkeit davon wird [SHORTCODE1], [SHORTCODE2] oder [SHORTCODE3] ausgeführt.

Ich denke für Profis ist diese Funktion trivial, deshalb würde ich mich sehr über ein klein wenig Starthilfe freuen

Gruß
Moritz

 

[dbarthel]

<script type="text/javascript">
	$(document).ready(function(){
		$(this).find("input:radio[name='myradio']").click(function() {
		 val = ($("input:radio:checked[name='myradio']").val());                      
		});
	});
</script>

val

hat dann den Wert 1, 2 oder 3, je nachdem welche Checkbox ausgewählt wurde, und kann entsprechend weiter verwendet werden.

Aber dein

name=myradio

und

name=Meine Stati

muss in "", also

name="Meine Stati"
name="myradio"

außerdem würde ich, jedem Element auch ein

id

-Attribut zur Seite zu stellen. (meine Meinung)

 

[miniA4kuser]

Den Wert auslesen geht aber auch einfacher, wenn du jQuery benutzt:

<script type="text/javascript">
	$(document).ready(function(){
		$('input[name=myradio]').click(function () {
			var val = $('input[name=myradio]:checked').val();
		});
	});
</script>

außerdem würde ich dazu anraten, jedem Element auch ein ID-Tag zur Seite zu stellen.

Welchen Grund siehst du hierfür?

PS: Es heißt id-Attribut (und sollte kleingeschrieben werden)

 

[dbarthel]

Welchen Grund siehst du hierfür?

PS: Es heißt id-Attribut (und sollte kleingeschrieben werden)

@miniA4kuser:
bin es gewohnt, sowohl id als auch name zu verwenden, da dies mehrer Optionen zur weiteren Verwendung lässt; aber müssen tut man das nicht.
Mit der Kleinschreibung hast du Recht, habe es oben geändert.

 

[miniA4kuser]

@dbarthel: Klar ist das kein muss. Bei deinem Beispiel (eben noch gesehen) fehlt auch noch ein var da sonst die Variable val global ist. Dies sollte man vermeiden

Frage: Warum vervendesrt du $(this).find("input:radio[name='myradio']") in dem $(document).ready(function(){...});-Block?

 

[Moritz123]

@dbarthel

Vielen Dank schon mal. Wie verwende ich val dann im weiteren Code?

Jetzt bräuchte ich ja noch irgendwo im HTML-Code eine Zeile, die sinngemäß definiert "if val=2 [SHORTCODE2] ELSE [SHORTCODE1]"...?

 

[miniA4kuser]

Die Frage ist vielmehr: Was verbirgt sich hinter [SHORTCODE1] etc.?
Sind das nur kurze Code-Blocke? Oder sind das richtige bzw. etwas umfangreichere Funktionen?

Du könntest ja eine Fallunterscheidung mit Selfhtml...switch machen.

 

[Moritz123]

Hi miniA4kuser,

hinter dem Shortcode verbirgt sich HTML-Code, der aus einer externen PHP-Datei gezogen wird:

add_shortcode(
	'SHORTCODE1', create_function(
		'$atts, $data', 'return "
		
		 <div class=\"panel panel-default\">
                  <div class=\"panel-heading\"><h4>Text</h4></div>
                  <div class=\"panel-body\">
                 
               			<p>
						Mehr Text
                               </p>
						
                </div>
                </div>
		
		
		";'
	)
);

Und abhängig von der Auswahl des Radio-Buttons will ich onthefly den jeweiligen Shortcode ausführen.

Konkret bedeutet das, dass sich die Darstellung der HTML-Seite ändert.

 

[miniA4kuser]

Für längere Code-Abschnitte benutze bitte die

-Tags und nicht die [INLINE]-Tags.
Irgendwie scheinst du das etwas zu vermischen, sofern du mit [INLINE]create_function(...);[/INLINE] die PHP-Funktion meinst.

Denn PHP läuft Serverseitig und JavaScript läuft Clientseitig. Das heißt das JavaScript startet erst im Webbrowser und PHP ist dann schon längst fertig.

PS: Arbeitest du mit WordPress?

 

[Moritz123]

Danke für den Hinweis, habs angepasst.

Ja ich arbeite mit Wordpress.

Momentan ist es so, dass ich diverse kleinere Widgets und Seitenelemente mit Hilfe von Shortcodes aus einer externen PHP-Datei ziehe. Das bedeutet konkret, dass ich beispielsweise ein standardisiertes Formular in der Shortcodes-PHP-Seite schreibe und dann auf verschiedenen Webseiten durch den Shortcode [FORMULAR] einfüge. Ziel der Java-Script Funktion ist, in Abhängigkeit von der Radio-Button-Auswahl den jeweiligen Shortcode bzw. das was sich dahinter verbirgt darzustellen.

So wie ich Dich jetzt verstehe, müsste ich hier erst mal die Grundsatzfrage stellen, ob das überhaupt möglich ist...

 

[mikdoe]

bin es gewohnt, sowohl id als auch name zu verwenden, da dies mehrer Optionen zur weiteren Verwendung lässt

Mach ich auch noch oft so. Aber wenn ich das richtig mitbekommen habe versuchen Profis sowas immer zu vermeiden. Es reicht, wenn man das Objekt in einer lokalen Variable hat, damit kann man dann alles machen. Sogar in ein anderes Script übergeben.

 

[kkapsner]

Eine ID ist hald ähnlich wie eine globale Variable - nur im DOM.

So wie ich Dich jetzt verstehe, müsste ich hier erst mal die Grundsatzfrage stellen, ob das überhaupt möglich ist...

Genau. Schau' dir doch einfach mal im HTML-Quelltext an, was da durch die Shortcodes genau an HTML erzeugt wird und wie das mit dem JS korresponiert.

 

[j-l-n]

Eine ID ist hald ähnlich wie eine globale Variable - nur im DOM.

Gibt's da nicht auch dieses seltsame Verhalten im Browser, dass es tatsächlich funktioniert, wenn man auf eine ID wie eine globale Variable zugreift?

 

[kkapsner]

Ja, das gibt es - würde ich mich aber nicht darauf verlassen und es deswegen gar nicht erst verwenden.