Bedingtes Formular mit jQuery und Cookies

[dennis3484]

Hallo zusammen!

Ich versuche für meine Webseite ein Formular zu erstellen, bei dem je nach Auswahl eines Radio-Buttons weitere Formularelemente geladen werden sollen. Zusätzlich soll die Auswahl erhalten bleiben, damit bei der Eingabe von fehlerhaften Daten das Formular vom Benutzer ausgebessert werden kann.

Da ich jQuery-Anfänger bin, habe ich ein Tutorial auf Onextrapixel gefunden, bei dem eine ähnliche Funktion implementiert wird. Anschließend habe ich versucht mithilfe der .hide() und .show()-Funktionen die entsprechenden Inhalte ein- bzw. auszublenden.

Ohne die Cookie-Funktionen klappt das auch alles wunderbar, doch sobald ich diese aktiviere, werden so gut wie nie die richtigen Inhalte angezeigt. Selbst das setzen von [I]display:none[/I] (siehe Beginn der nachfolgenden Funktion) funktioniert nicht mehr korrekt. Es wird immer nur eine ID ausgeblendet; an die andere wird der Style überhaupt nicht übergeben.

$(document).ready(function() {  
	$("#parent2").css("display","none");  
	$("#parent3").css("display","none");  
  
    $(".aboveage2").click(function() {  
    	if ($('input[name=age2]:checked').val() == "anfrage" ) {  
			$("#parent3").hide();  
			$("#parent2").slideDown("fast");  
			$.cookie('auswahl_radio', 'radio_allgemein');  
        } else {  
			$("#parent2").hide();  
			$("#parent3").slideDown("fast");  
			$.cookie('auswahl_radio', 'radio_rezept');  
        }  
     });  
  
	var auswahl_radio = $.cookie('auswahl_radio');  
  
	if (auswahl_radio == 'radio_allgemein') {  
		$("#parent3").hide();  
		$("#parent2").show();  
		$('#opt_29_0').attr('checked', 'checked');  
	} else {  
		$("#parent2").hide();  
		$("#parent3").show();  
		$('#opt_29_1').attr('checked', 'checked');  
	}  
});  

Hier noch der wichtigste HTML-Code:

<div>  
<form action="kontakt.html" id="f3" method="post">  
<div id="ctrl_29" class="radio_container aboveage2">  
	<input type="radio" name="age2" id="opt_29_0" class="radio" value="anfrage" />  
	<label id="lbl_29_0" for="opt_29_0">radio1</label>  
	  
	<input type="radio" name="age2" id="opt_29_1" class="radio" value="rezept" />  
	<label id="lbl_29_1" for="opt_29_1">radio2</label>  
</div>  
</form>  
</div>  
  
<div id="parent2">  
<form action="kontakt.html" id="f1" method="post">  
	<div class="row_1 odd headline">  
		<p>Name: <span style="color: #ff0000;">*</span></p>  
	</div>  
	<input type="text" name="Name" id="ctrl_1" class="text mandatory" value="" /><br />  
	  
	<input type="submit" id="ctrl_99" class="submit" value="Absenden" />  
</div>  
  
<div id="parent3">  
<form action="kontakt.html" id="f5" method="post">  
	<div class="row_3 odd headline">  
		<p>E-Mail: <span style="color: #ff0000;">*</span></p>  
	</div>  
	<input type="text" name="Email" id="ctrl_56" class="text mandatory" value="" /><br />  
	  
	<input type="submit" id="ctrl_63" class="submit" value="Absenden" />  
</div>  
</form>  
</div>

Vielen Dank für die Hilfe!

[Cheatah]

Hi,

Selbst das setzen von [I]display:none[/I] (siehe Beginn der nachfolgenden Funktion) funktioniert nicht mehr korrekt. Es wird immer nur eine ID ausgeblendet; an die andere wird der Style überhaupt nicht übergeben.

genau das besagt der Teil Deines Codes: Wenn der Cookie einen bestimmten Wert hat, wird genau das eine Element ausgeblendet, andernfalls genau das andere. Die ersten zwei Zeilen in der Funktion sind hinfällig, sie werden garantiert später überschrieben.

Übrigens solltest Du niemals erst nach dem Laden der Seite ausblenden, sondern tunlichst schon vor dem Rendern der entsprechenden Elemente dafür gesorgt haben, dass sie nicht angezeigt werden.

Cheatah

[dennis3484]

Hallo und danke für deine Nachricht!

Übrigens solltest Du niemals erst nach dem Laden der Seite ausblenden, sondern tunlichst schon vor dem Rendern der entsprechenden Elemente dafür gesorgt haben, dass sie nicht angezeigt werden.

Anscheinend sind mir so einige Dinge von jQuery noch nicht ganz klar. Wie ließe sich dieses Problem lösen, dass die Elemente bereits vor dem Rendern ausgeblendet sind? Direkt im CSS display:none; setzen?

Vielen Dank

[dennis3484]

Nach ein wenig Schlaf konnte ich das Problem nun selbst lösen. ;)

Mein kompletter Code war nicht wirklich sinnvoll sortiert. Hier die Variante, die bei mir funktioniert.

$(document).ready(function() {  
	var auswahl_radio = $.cookie('auswahl_radio');  
	  
	if (auswahl_radio == 'radio_allgemein') {  
		$("#form_allgemein").show();  
		$('#opt_29_0').attr('checked', 'checked');  
	} else if (auswahl_radio == 'radio_rezept') {  
		$("#form_rezept").show();  
		$('#opt_29_1').attr('checked', 'checked');  
	} else {  
		$("#form_allgemein").css("display","none");  
		$("#form_rezept").css("display","none");  
	}  
  
	$(".kontakt_anliegen").click(function() {  
    	if ($('input[name=anliegen]:checked').val() == "anfrage" ) {  
			$("#form_rezept").hide();  
			$("#form_allgemein").slideDown("fast");  
			$.cookie('auswahl_radio', 'radio_allgemein');  
        } else {  
			$("#form_allgemein").hide();  
			$("#form_rezept").slideDown("fast");  
			$.cookie('auswahl_radio', 'radio_rezept');  
        }  
	});  
});

Die <div>s habe ich direkt im CSS auf display:none; gesetzt.

[ChrisB]

Hi,

Die <div>s habe ich direkt im CSS auf display:none; gesetzt.

Dann ist das ganze gar nicht mehr benutzbar, wenn kein JS verfügbar ist.

*Sinnvoll* löst man sowas, in dem man body direkt beim Laden der Seite eine Klasse verpasst - und dann die Ausblendung über die Nutzung bspw. des Nachfahrenselektors macht.

MfG ChrisB