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!