Formular Auswertung bei gleichen Element Namen

lueni · 15. Nov. 2016

Hi zusammen!

Leider habe ich zu meinem Problem bisher noch nichts gefunden was mir wirklich weiter hilft. Vielleicht kann mir von Euch jemand weiterhelfen..

Ich habe ein Formular, das aus mehreren Teil-Formularen besteht. Die einzelnen Checkboxgruppen besitzen auch den selben Namen.
Nun möchte ich einen Check einbauen, der überprüft ob mindestens eine Checkbox ausgewählt wurde.

Dadurch dass die einzelnen Gruppen jedoch den selben Namen haben, wird "(document.forms["checkboxform"].elements["chkbx1"].checked == false)" erst als richtig erkannt wenn alle checkboxen mit dem selben Namen angewählt wurde.

PHP:

<form>
        <label>Checkboxengruppe 1</label><br>
        <input type="checkbox" name="chkbx1" value="1" form="checkboxform"/><br>
        <input type="checkbox" name="chkbx1" value="2" form="checkboxform"/><br>
        <input type="checkbox" name="chkbx1" value="3" form="checkboxform"/><br>
        
</form>
<form>
        <label>Checkboxengruppe 2</label><br>
        <input type="checkbox" name="chkbx2" value="4" form="checkboxform"/><br>
        <input type="checkbox" name="chkbx2" value="5" form="checkboxform"/><br>
        <input type="checkbox" name="chkbx2" value="6" form="checkboxform"/><br>
</form>
    
<form id="checkboxform" action="#" method="post" >
        <input type="submit" value="weiter" onclick="return auswertung()"/>
</form>    


<script type="text/javascript>
function auswertung(){
            
    if (document.forms["checkboxform"].elements["chkbx1"].checked == false){
    alert("checkbox nicht gechecked");
    return false;
}
    if (document.forms["checkboxform"].elements["chkbx2"].checked == false){
    alert("checkbox nicht gechecked");
    return false;
    }
}
</script>

Wie kann ich die Checkboxen dennoch auf Eingabe überprüfen?

Vielen Dank für Eure Hilfe,
lueni

andreax · 15. Nov. 2016

Radiobuttons sind keine Alternative?
Bei den Checkboxen musst du jede einzeln überprüfen. mit [0] [1] [2] noch an die elements namen

so

Code:

if (document.forms["checkboxform"].elements["chkbx1"][0].checked == false)...

oder so

Code:

<!DOCTYPE html>
<html>
<head>

</head>

<body>
<form name="checkboxform"> 
<p class="boxcheck">
        <label>Checkboxengruppe 1</label><br> 
        <input type="checkbox" name="chkbx1" value="1" form="checkboxform"/><br> 
        <input type="checkbox" name="chkbx1" value="2" form="checkboxform"/><br> 
        <input type="checkbox" name="chkbx1" value="3" form="checkboxform"/><br> 
</p>
<p class="boxcheck">         
        <label>Checkboxengruppe 2</label><br> 
        <input type="checkbox" name="chkbx2" value="4" form="checkboxform"/><br> 
        <input type="checkbox" name="chkbx2" value="5" form="checkboxform"/><br> 
        <input type="checkbox" name="chkbx2" value="6" form="checkboxform"/><br> 
</p>
</form> 
     
<form id="checkboxform" action="#" method="post" > 
        <input type="submit" value="weiter" onclick="return auswertung()"/> 
</form> 
<script> 
function auswertung(){ 
    event.preventDefault();
	var pInput = document.querySelectorAll('form .boxcheck');
	for(var i = 0;i< pInput.length;i++)
	{var ck = 0;
	 var isChecked = pInput[i].querySelectorAll('input');
	  for(var j=0;j<isChecked.length;j++)
	  {
	    if(isChecked[j].checked == true){ck++;}
	  }
	  if(ck>0){alert("Es wurden "+ck+" Boxen abgehakt");}
	}
	}
 
</script>  
</body>
</html>

lueni · 15. Nov. 2016

Hi andreax, vielen Dank für deine schnelle Antwort!

Radioboxen sind leider keine Alternative in diesem Fall...Das Ganze ist sehr viel Umfrangreicher und ich muss mehrere Elemente wählen können.

Also dein erster Vorschlag funktioniert schonmal prima, mein Fehler war dann wirklich, dass ich jedes Element einzeln addressieren muss (was ich nicht getan habe

).

Jedoch zu dem zweiten Vorschlag habe ich noch Fragen.. Funktioniert die Funktion querySelectorAll auch ohne class Elemente, sondern mit ID? Dann müsste es bei mir heißen

PHP:

var pInput = document.querySelectorAll('form.checkboxform');

Das Formular wird, egal was ich bei "document.querySelectorAll('form.checkboxform');" eintrage immer abgesendet..

Ich hab mehrere Bücher zum Thema Javascript, aber komischerweise werden immer nur Textfelder und Radiobuttons behandelt :icon8:

Vielen Dank für die Hilfe!
lueni

andreax · 16. Nov. 2016

Ich habe die Input-Felder durch zwei P Container getrennt weil du ja auch 2 Gruppen angelegt hast .
Und diese mit einer verständlichen Klasse versehen denn eine ID darf nur einmal in einem Dokument vorkommen.
Daher müsste man auch für jede ID eine querySelection mache, aber für ID's eignet sich eher getElementById('idelement');
Man hätte auch die Klassen weglassen können und nur querySelector('form p') schreiben können.

var pInput ist nun eine Collection in der beide P Tags mit den Inputs gespeichert sind und auf die man getrennt über [ ] zugreifen kann .
Mit Hilfe der boxcheck Klasse kannst du deine Gruppen beliebig erweitern .und wenn du im Formular mal ein p Tag für andere Zwecke brauchst dann gibt das keinen Konflikt.
Es muss ja kein P Tag sein ein fieldset mit dieser Klasse hätte den selben Effekt.

Klar kann dein Formular eine ID haben dann kannst du querySelectorAll('#form-id .boxcheck') verwenden und bei ID's nicht das # vergessen querySelector verwended man mit Css-Selectoren.

Wenn nötig werde ich ein verständliches Beispiel mit Kommentaren folgen lassen

- - - Aktualisiert - - -

Nachtrag :

Code:

var pInput = document.querySelectorAll('form.checkboxform');

1. das geht nicht weil checkboxform keine Klasse ist.
Bei querySelectorAll wird ein String übergeben und der macht aus dem Punkt einen Klassen-Spezifizierer.

2. "das form = checkboxform" ist damit das Formular beim senden weis das diese Inputs mit dabei sein sollen auch wenn sie sich nicht in checkboxform befinden.

und damit man zB. mit

Code:

 var a = document.forms.checkboxform.chkbx1;

alle 3 inputs mit dem namen chkbx1 in a sammeln kann.

lueni schrieb:
Vielen Dank für die Hilfe!
lueni

lueni · 16. Nov. 2016

Hi andreax!

Zuersteinmal vielen vielen Dank!

Ich war etwas blind.. ich habe nicht gesehen dass du im HTML Code

PHP:

<p class="boxcheck">

hinzugefügt hast, deshalb war es mir ein Rätsel wie du auf

PHP:

var pInput = document.querySelectorAll('form .boxcheck');

gekommen bist...

Jetzt ist so einiges klarer.. und es funktioniert, bis auf event.preventDefault, was verhindert werden soll verstehe ich nicht direkt, ich lasse es einfach weg...

Eine Kleinigkeit habe ich noch geändert, nämlich dass ich nach dem Durchlauf jeder einzelnen Checkbox prüfe, ob die Variable "ck" schon größer 0 ist, da es mir ja nur wichtig ist zu überprüfen, ob mindestens eine Checkbox angehakt wurde.

Der gesamte Code sieht nun so aus, falls es sonst noch jemanden interessieren sollte:

PHP:

	<form name="checkboxform"> 
	<p class="boxcheck">
		<label>Eingabe mehrere Checkboxen mit gleichem Namen</label><br>
		<input type="checkbox" name="chkbx1" value="1" form="checkboxform"/><br>
		<input type="checkbox" name="chkbx1" value="2" form="checkboxform"/><br>
		<input type="checkbox" name="chkbx1" value="3" form="checkboxform"/><br>
		
	</p>	
	</form>
	<form name="checkboxform"> 
	<p class="boxcheck">
		<label>Eingabe mehrere Checkboxen mit gleichem Namen</label><br>
		<input type="checkbox" name="chkbx2" value="4" form="checkboxform"/><br>
		<input type="checkbox" name="chkbx2" value="5" form="checkboxform"/><br>
		<input type="checkbox" name="chkbx2" value="6" form="checkboxform"/><br>
	</p>
	</form>
	
	<form name="checkboxform"> 
	<p class="boxcheck">
		<label>Eingabe mehrere Checkboxen mit gleichem Namen</label><br>
		<input type="checkbox" name="chkbx3" value="7" form="checkboxform"/><br>
		<input type="checkbox" name="chkbx3" value="8" form="checkboxform"/><br>
		<input type="checkbox" name="chkbx3" value="9" form="checkboxform"/><br>
	</p>
	</form>
	
		
	<form id="checkboxform" action="#" method="post" onclick="return auswertung()">
		<input type="submit" value="weiter"/>
	</form>	
		
		
	<script type="text/javascript">	
		function auswertung(){
			
		
			    //event.preventDefault();
				var pInput = document.querySelectorAll('form .boxcheck');
				for(var i = 0;i< pInput.length;i++)
				{
					var ck = 0;
				 	var isChecked = pInput[i].querySelectorAll('input');
					  for(var j=0;j<isChecked.length;j++)
					  {
					    if(isChecked[j].checked == true){ck++;}
					    if (ck > 0) {
							return true;
						}
					  }
					  if(ck>0)
					  	{return true;}
					  else {
						alert("Bitte waehlen Sie etwas aus!");
						return false;
					  }
				}
			}
	</script>

Ich danke recht umfangreich für die Erkärung und deine Beispiele!

Grüße, lueni

kkapsner · 16. Nov. 2016

lueni schrieb:
ich lasse es einfach weg...

Das würde in Browsern, die nicht IE sind, auch einen Fehler werfen. Damit würde das Absenden des Formulars verhindert werden. Aber dazu müsste an die Funktion natürlich das Event-Objekt auch übergeben werden.

Außerdem wäre es an dieser Stelle falsch, da dann niemals abgesendet wird. Also hast du Recht: lass es weg.

lueni · 16. Nov. 2016

kkapsner schrieb:
Also hast du Recht: lass es weg.

Okay...

Leider muss ich euch jetzt aber doch nochmal behelligen..

PHP:

<form name="accordion"> 
<p class="boxcheck">
	<fieldset>	
                <?php
		echo "<input class='accordion_checkbox' type='checkbox' name='soz_kompetenz[]' form='accordion' value='".$soz_kompetenz[0]."'>";
		echo $soz_kompetenz[0] . "<br />";
		echo "<input class='accordion_checkbox' type='checkbox' name='soz_kompetenz[]' form='accordion' value='".$soz_kompetenz[1]."'>";
		echo $soz_kompetenz[1] . "<br />";
		echo "<input class='accordion_checkbox' type='checkbox' name='soz_kompetenz[]' form='accordion' value='".$soz_kompetenz[2]."'>";
		echo $soz_kompetenz[2] . "<br />";
                ...
                ?>
	</fieldset>
</p>
</form>

<form id="accordion" action="1_aw_sq.php" method="post" onclick="return auswertung()">
	 <input form="accordion" class="accordion_button" type="reset" name="reset" value="Zurücksetzen"/>	
   	<input form="accordion" class="accordion_button" type="submit" name="absenden" value="Weiter" />					  
</form>

So sieht meine tatsächliche Anwendung aus.. das Ganze unterscheidet sich jetzt nicht riesig, jedoch erkennt er so folgendes nicht:

PHP:

var isChecked = pInput[i].querySelectorAll('input');

Ich habe schon versucht nicht den kompletten Absatz innerhalb "fieldset" in PHP zu schreiben, sondern nur an Variable PHP zu nutzen, ebenfalls habe ich folgendes versucht:

PHP:

var isChecked = pInput[i].querySelectorAll('fieldset .input');

Ich habe fieldset als Platzhalter eingefügt, jedoch beides ohne Erfolg.

In welche Richtung muss ich da denken? Liegt es am PHP? Oder dem fieldeset, welches noch dazwischen steht?

Danke für Eure Hilfe!

- - - Aktualisiert - - -

Okay, also ich habe herausgefunden dass es am Tag <fieldset> liegt.. Dh. dass die Platzhalter in querySelectorAll falsch gesetzt sind... kann mir da vielleicht jemand weiter helfen?
Danke

- - - Aktualisiert - - -

Sooo, noch ein Nachtrag, ich habe doch noch herausgefunden wie ich es anstellen kann, und zwar habe ich den p-Tag entfernt, und die Klasse mit in fieldset gepackt, so funktioniert es!

PHP:

<form name="accordion"> 
<fieldset class="boxcheck">	
         ...
</fieldset>
</form>

anstatt:

PHP:

<form name="accordion"> 
<p class="boxcheck">
   <fieldset>	
         ...
   </fieldset>
</p>
</form>

andreax · 16. Nov. 2016

@lueni das hast du toll hinbekommen

Formular Auswertung bei gleichen Element Namen

lueni

New member

andreax

Guest

lueni

New member

andreax

Guest

lueni

New member

kkapsner

Super Moderator

lueni

New member

andreax

Guest