Formularproblem

E

exhubiranta

Mitglied
Hallo liebe Leute,

ich soll ein Formular für meinen Verein machen und weiß nicht, wie der Fachausdruck für die gewünschte Funktion ist, deswegen konnte ich nicht danach suchen. Ich möchte in einem Formular nach einer bestimmten Auswahl das Formular anders weiter gehen lassen, z.B.

Ich möchte meinen Mitgliederbeitrag bezahlen als...

Checkbox1 quartalsweise Abbuchung
Checkbox2 Jahresrechnung zu Beginn des Jahres

Wenn ich Checkbox1 wähle, klappt sofort unter beiden Zeilen das weitere Formular auf, dass aus den Eingabefeldern Kontonummer, Bank, BLZ besteht. Wenn ich Checkbox 2 wähle, passiert nichts.

Hier schon mal der Code für das bisherige. Mir ist weiterhin nicht klar, wie man es macht, dass immer nur eine Checkbox anhakelbar ist. Mit Radiobuttons, die mir aber zu klein und unhandlich sind, ist das kein Problem, aber mit Checkboxen weiß ich das leider nicht:

HTML: 
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td colspan="3">Ich m&ouml;chte meinen Mitgliederbeitrag bezahlen als...</td>
</tr>
<tr>
<td colspan="2">Quartalsweise Abbuchung</td>
<td><input type="checkbox" value="checkboxValue" name="checkboxName"></td>
</tr>
<tr>
<td colspan="2">Jahresrechnung zu Beginn des Jahres</td>
<td><input type="checkbox" value="checkboxValue" name="checkboxName"></td>
</tr>
<tr>
<td>Bank:</td>
<td colspan="2"><input type="text" name="textfieldName" size="24"></td>
</tr>
<tr>
<td>Konto-Nr.</td>
<td colspan="2"><input type="text" name="textfieldName" size="24"></td>
</tr>
<tr>
<td>BLZ</td>
<td colspan="2"><input type="text" name="textfieldName" size="24"></td>
</tr>
</table>

Könnt ihr mir helfen? Danke schon mal fürs Draufschauen.
Greetings
exi
 
Habe weitergesucht und bin fündig geworden. Allerdings beißen sich die zwei Codes irgendwie, es klappt nicht richtig. Was habe ich falsch gemacht? Jetzt bin ich total ratlos.

HTML: 
<html>
 <head>
	<script type="text/javascript">
	<!--
	 function toggle(strID){
		var myObj = document.getElementById(strID);
		if(myObj.style.display == "none"){
		 myObj.style.display = "block";
		}else{
		 myObj.style.display = "none";
		}
	 }
	//-->
	</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Mike Best (mike.best@hei-usa.com) -->
<!-- Web Site:  http://www.hei-usa.com -->
<!-- Begin
function checkBoxValidate(cb) {
for (j = 0; j < 2; j++) {
if (eval("document.privat.ckbox[" + j + "].checked") == true) {
document.privat.ckbox[j].checked = false;
if (j == cb) {
document.privat.ckbox[j].checked = true;
         }
      }
   }
}
//  End -->
</script>
 </head>
 <body>
		<form name="privat" action="(Empty Reference!)" method="get">
			<table width="100%" border="0">
				<tr>
					<td width="24%">Quartalsweise Abbuchung</td>
					<td width="76%"><input  type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(0)" value="on"></td>
				</tr>
				<tr>
					<td>Jahresrechnung am Jahresbeginn</td>
					<td><input onclick="toggle('1.1'); toggle('1.2'); toggle('1.3')" type="checkbox" name="ckbox" onClick="javascript:checkBoxValidate(1)" value="on"></td>
				</tr>
				<tr id="1.1" style="display: none">
					<td>&nbsp;Bank:</td>
					<td><input type="text" name="textfieldName" size="24"></td>
				</tr>
				<tr id="1.2" style="display: none">
					<td>&nbsp;Konto-Nr.</td>
					<td><input type="text" name="textfieldName" size="24"></td>
				</tr>
				<tr id="1.3" style="display: none">
					<td>&nbsp;BLZ</td>
					<td><input type="text" name="textfieldName" size="24"></td>
				</tr>
			</table>
		</form>
	</body>
</html>
 
Hi,

Du gibst in der einen Checkbox zweimal onclick an. Pack die validate-Funktion mit in das erste onclick:

HTML: 
<input onclick="toggle('1.1'); toggle('1.2'); toggle('1.3');checkBoxValidate(1);" type="checkbox" name="ckbox" value="on">

LG
 
Habe mir gedacht, probiere es doch mit Radiobuttons. Jetzt ist das Problem ähnlich mit diesem Code.

Eigentlich sollte bei dem Code immer nur ein Radiobutton aktivierbar sein. Bei diesem Code hier sind jedoch wieder zwei anschaltbar. Und das Problem ist, dass ich die Aktivierung nicht mehr rückgängig machen kann. Sind sie beide aktiviert, geht nichts mehr.

Was fehlt in dem Code noch? Danke schon mal für eure Hinweise

Könnt ihr mir nicht irgendwie helfen?

HTML: 
<html>
 <head>
	<script type="text/javascript">
	<!--
	 function toggle(strID){
		var myObj = document.getElementById(strID);
		if(myObj.style.display == "none"){
		 myObj.style.display = "block";
		}else{
		 myObj.style.display = "none";
		}
	 }
	//-->
	</script>
 </head>
 <body>
		<form name="privat" action="(Empty Reference!)" method="get">
			<table width="100%" border="0">
				<tr>
					<td width="24%">Quartalsweise Abbuchung</td>
					<td width="76%"><input type="radio" value="abbuchung" name="chbox"></td>
				</tr>
				<tr>
					<td>Jahresrechnung am Jahresbeginn</td>
					<td><input type="radio" onclick="toggle('1.1'); toggle('1.2'); toggle('1.3');" value="rechnung" name="ckbox"></td>
				</tr>
				<tr id="1.1" style="display: none">
					<td>&nbsp;Bank:</td>
					<td><input type="text" name="textfieldName" size="24"></td>
				</tr>
				<tr id="1.2" style="display: none">
					<td>&nbsp;Konto-Nr.</td>
					<td><input type="text" name="textfieldName" size="24"></td>
				</tr>
				<tr id="1.3" style="display: none">
					<td>&nbsp;BLZ</td>
					<td><input type="text" name="textfieldName" size="24"></td>
				</tr>
			</table>
		</form>
	</body>
</html>
 
Oh ja danke für den Hinweis, habe ich echt nicht gesehen.

Es geht wieder ein bisschen besser, aber immer noch nicht perfekt. Denn jetzt ist Folgendes:

Markiere ich den Button 2 (Jahresabrechnung), taucht darunter wie gewünscht das weitere Formular auf.

Aktiviere ich danach Button 1 (Abbuchung), kann ich das zwar machen und Button 2 wird auch deaktiviert, jedoch bleibt das weitere Formular darunter stehen. Das soll nicht sein.

Dann kommt es noch bunter: Wenn ich wieder auf Button 2 klicke, geht das Formular wieder weg. In der nächsten Abfolge geht wieder alles wie gewünscht, aber dann kommt es wieder so, wie es nicht sein soll.

Was kann man dagegen tun?
 
Bei dem zweiten Radiobutton ist das onclick drin. Warum soll das in das erste, das hat doch keinen Sinn! Auch wenn ich nur onclick="toggle" eintrage, löst sich das Problem nicht! Was muss ich denn eintragen?
 
Zuletzt bearbeitet:
Hi,

Warum soll das in das erste, das hat doch keinen Sinn! Auch wenn ich nur onclick="toggle" eintrage, löst sich das Problem nicht! Was muss ich denn eintragen?
Zum Vergrößern anklicken....

Jetzt versuch doch erstmal, den Codeschnipsel, den Du da kopiert hast zu verstehen. Das Verhalten, das Du da beschreibst, ist genauso, wie es halt programmiert ist. Works as designed. Wenn Du dem ersten Radiobutton kein onclick-Event zuweist, wie soll denn da bitte etwas passieren, sprich Elemente ausgeblendet werden?

Beim 2. Klick auf den 2. Radiobutton wird das Formular wieder ausgeblendet, da es vorher eingeblendet war. So steht's halt in der Funktion. Das kann man doch schon rein über Englisch-Kenntnisse erkennen.
Schreib die Funktion lieber so um, dass sie einen 2. Parameter "mode" (z.B.) akzeptiert, der festlegt, ob das Element nun ein- oder ausgeblendet werden soll.

LG
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück