Ergebnis 1 bis 8 von 8
  1. #1
    lueni ist offline Grünschnabel
    registriert
    15-11-2016
    Beiträge
    4

    Cool Formular Auswertung bei gleichen Element Namen

    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-Code:
    <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

  2. #2
    Avatar von andreax
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    211

    AW: Formular Auswertung bei gleichen Element Namen

    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>

  3. #3
    lueni ist offline Grünschnabel
    registriert
    15-11-2016
    Beiträge
    4

    AW: Formular Auswertung bei gleichen Element Namen

    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-Code:
    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

    Vielen Dank für die Hilfe!
    lueni

  4. #4
    Avatar von andreax
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    211

    AW: Formular Auswertung bei gleichen Element Namen

    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.





    Zitat Zitat von lueni Beitrag anzeigen
    Vielen Dank für die Hilfe!
    lueni
    Geändert von andreax (16-11-2016 um 10:00 Uhr)

  5. #5
    lueni ist offline Grünschnabel
    registriert
    15-11-2016
    Beiträge
    4

    AW: Formular Auswertung bei gleichen Element Namen

    Hi andreax!

    Zuersteinmal vielen vielen Dank!

    Ich war etwas blind.. ich habe nicht gesehen dass du im HTML Code
    PHP-Code:
    <class="boxcheck"
    hinzugefügt hast, deshalb war es mir ein Rätsel wie du auf
    PHP-Code:
    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-Code:
        <form name="checkboxform"
        <
    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"
        <
    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"
        <
    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 
    0;ipInput.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

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.663

    AW: Formular Auswertung bei gleichen Element Namen

    Zitat Zitat von lueni Beitrag anzeigen
    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.

  7. #7
    lueni ist offline Grünschnabel
    registriert
    15-11-2016
    Beiträge
    4

    AW: Formular Auswertung bei gleichen Element Namen

    Zitat Zitat von kkapsner Beitrag anzeigen
    Also hast du Recht: lass es weg.
    Okay...

    Leider muss ich euch jetzt aber doch nochmal behelligen..

    PHP-Code:
    <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&uuml;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-Code:
    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-Code:
    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-Code:
    <form name="accordion"
    <
    fieldset class="boxcheck">    
             ...
    </
    fieldset>
    </
    form
    anstatt:

    PHP-Code:
    <form name="accordion"
    <
    class="boxcheck">
       <
    fieldset>    
             ...
       </
    fieldset>
    </
    p>
    </
    form

  8. #8
    Avatar von andreax
    andreax ist offline Tripel-As
    registriert
    09-07-2016
    Beiträge
    211

    AW: Formular Auswertung bei gleichen Element Namen

    @lueni das hast du toll hinbekommen

Ähnliche Themen

  1. mehrere Checkboxen mit gleichen Namen
    Von djsky01 im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 04-02-2014, 18:09
  2. Array Element finden nach dem key namen
    Von Redpadz im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 17-08-2012, 12:38
  3. Antworten: 2
    Letzter Beitrag: 08-04-2008, 14:59
  4. Formular Auswertung
    Von croque-monsieur im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 01-02-2007, 12:10
  5. Antworten: 3
    Letzter Beitrag: 11-05-2006, 09:52

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •