Checkboxen überprüfen

[echnaton]

Hallo zusammen

Ich habe folgendes Problem: Ich will mit Javascript überprüfen, ob mindestens eine Checkbox markiert wurde, weil's nur dann Sinn macht, das Formular zu senden.

  
<form name="formular" action="">  
  <input type="checkbox" name="box" value="1" /> 1 <br />  
  <input type="checkbox" name="box" value="2" /> 2 <br />  
  <input type="checkbox" name="box" value="3" /> 3 <br />  
  <input type="button" onClick="[code lang=javascript]var j=0;for(i=0;i<3;i++) { if(document.formular.box[i].checked == true){j++;};};if(j<1){alert('Nichts markiert!')}else{document.formular.submit()};
~~~" value="&Uuml;berpr&uuml;fen"/>  
</form>[/code]  
  
So funktionierts. Aber wenn ich das Formular versende, kann PHP natürlich nichts damit anfangen, weil es einen Array erwartet - und dazu fehlen die [].  
  
Also müsste es so aussehen:  
`<input type="checkbox[]" name="box" value="2" /> 2`{:.language-html}  
Jetzt funktioniert aber JavaScript nicht mehr.  
  
Weiss jemand wie man beide zum Laufen bringt?  
  
  
Danke für eure Hilfe  

[minicrispie]

Hallo,

Weiss jemand wie man beide zum Laufen bringt?

es gibt kein type="checkbox[]" ... gib allen boxen einen anderen namen und arbeite damit ...

MfG. Christoph Ludwig

[Joachim]

Hi,

Jetzt funktioniert aber JavaScript nicht mehr.

<input type="checkbox" name="box[]" value="1" />
if (document.formular.elements["box[" + i + "]"].checked) ...

und nutze onsubmit, dann kannst Du mit einem normalen Submit arbeiten. Lagere ausserdem das Js in eine Funktion aus, so ist das Kuddelmuddel...

Grüsse, Joachim

[Joachim]

Hi,

<input type="checkbox" name="box[]" value="1" />

Korrektur, für js sind indizies nötig:
<input type="checkbox" name="box[0]" value="1" />
<input type="checkbox" name="box[1]" value="1" />
<input type="checkbox" name="box[2]" value="1" />

Gruesse, Joachim

[molily]

<input type="checkbox" name="box[]" value="1" />
Korrektur, für js sind indizies nötig

Ähm, nein. elements["box[]"] liefert einen Array.

Mathias

[Joachim]

Hi Mathias,

Ähm, nein. elements["box[]"] liefert einen Array.

ups.. ja, ich vergass, gleiche Namen bilden ein Array. Also, Korrektur der Korrektur, beides geht... das:

function check() {
    var box =  document.formular.elements["box[]"];
    for (i = 0; i < box.length; i++) {
        if (box[i].checked) alert(box[i].value)
    }
}
    <form name="formular" method="get" onsubmit="return check()">
        <input type="checkbox" name="box[]" value="1">
        <input type="checkbox" name="box[]" value="2">
        <input type="checkbox" name="box[]" value="3">
        <input type="submit">
    </form>

...und das...

<script type="text/javascript">
function check() {
    for (i = 0; i < 3; i++) {
        if (document.formular.elements["box["+i+"]"].checked) alert(document.formular.elements["box["+i+"]"].value)
    }
}
</script>

<form name="formular" method="get" onsubmit="return check()">
        <input type="checkbox" name="box[0]" value="1">
        <input type="checkbox" name="box[1]" value="2">
        <input type="checkbox" name="box[2]" value="3">
        <input type="submit">
    </form>

Gruesse, Joachim

[ChrisB]

Hi,

Aber wenn ich das Formular versende, kann PHP natürlich nichts damit anfangen, weil es einen Array erwartet - und dazu fehlen die [].

Also müsste es so aussehen:
<input type="checkbox[]" name="box" value="2" /> 2

Nein, die Klammern gehoeren wie gesagt ans Ende des Feldnamens.

Jetzt funktioniert aber JavaScript nicht mehr.

http://de.selfhtml.org/javascript/objekte/elements.htm#allgemeines, Schema 4.
Wer mal selber was nachliest, muss nicht fragen.

MfG ChrisB

[molily]

<form name="formular" action="">
  <input type="checkbox" name="box" value="1" /> 1 <br />
  <input type="checkbox" name="box" value="2" /> 2 <br />
  <input type="checkbox" name="box" value="3" /> 3 <br />
  <input type="button" onClick="[code lang=javascript]var j=0;for(i=0;i<3;i++) { if(document.formular.box[i].checked == true){j++;};};if(j<1){alert('Nichts markiert!')}else{document.formular.submit()};

> </form>[/code]  
  
Das ist nicht so elegant gelöst.  
  
Erstmal eine Trennung von sinnvollem HTML und JavaScript:  
  
~~~html
<form name="formular" action="">  
<ol>  
<li><label><input type="checkbox" name="box[]" value="1" /> 1</label></li>  
...  
</ol>  
<p><input type="submit" value="Überprüfen" /></p>  
</form>

Die Darstellung kannst du beliebig mit CSS modifizieren.

Die JavaScript-Logik fügst du am besten mit JavaScript beim onload hinzu:

window.onload = function () {  
   document.forms.formular.onsubmit = formularÜberprüfung;  
};  
function formularÜberprüfung () { ... }

Das Formular bekommt dann einen ganz normalen Submitbutton ohne onclick-Attribut. Beim Absenden des Formulars wird automatisch der submit-Handler aufgerufen.

formularÜberprüfung durchläuft die Checkboxen mit name="box[]" und prüft, ob eines davon checked ist:

var checkboxes = document.forms.formular.elements["box[]"];  
var checked = false;  
for (var i = 0, checkbox; checkbox = checkboxes[i]; i++) {  
   if (checkbox.checked) {  
      checked = true;  
   }  
}  
if (!checked) {  
   window.alert("Fehler!");  
   return false;  
}

Wenn nicht, dann gibt es eine Fehlermeldung aus und verhindert das Absenden des Formulars.

Mathias

[peterS.]

gruss molily, hallo echnaton;

<form name="formular" action="">

<ol>
<li><label><input type="checkbox" name="box[]" value="1" /> 1</label></li>
...
</ol>
<p><input type="submit" value="Überprüfen" /></p>
</form>

  
  
falls man nicht auf eine »box[]«-collection zugreifen kann, hilft vielleicht  
auch die array-methode [filter]. \*eleganter\* pruefen laesst es sich auf alle  
faelle mit der array-methode [some]. molilys loesung kaeme umgeschrieben dann  
etwa so daher:  
  
  
~~~javascript
(function () {  
  
  
  var formInputElements;  
  
  
  var checkForm = (function () {  
  
    var isValid = [link:https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Array/filter#Compatibility@title=Array.filter](formInputElements, (function (elm/*, idx, arr*/) {  
  
      return (elm.type == "checkbox");  
  
      }))[link:https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Array/some#Compatibility@title=.some](function (elm/*, idx, arr*/) {  
  
      return elm.checked;  
    });  
    if (!isValid) {/*  
  
      ... fehlerbehandlung hier ... */  
    }  
    return isValid;  
  });  
  
  
  var initialize = (function () {  
  
    var elmForm = document.forms["formular"];  
  
    formInputElements = elmForm.getElementsByTagName("input");  
  
    if (elmForm.addEventListener) {  
      elmForm.addEventListener("submit", (function () {return checkForm();}), false);  
    } else if (elmForm.attachEvent) {  
      elmForm.attachEvent("onsubmit", (function () {return checkForm();}));  
    }  
    delete elmForm;  
    delete initialize;  
    delete arguments.callee;  
  });  
  
  
  (function () {  
    if (window.addEventListener) {  
      window.addEventListener("load", initialize, false);  
    } else if (window.attachEvent) {  
      window.attachEvent("onload", initialize);  
    }  
    delete arguments.callee;  
  })();  
  
})();

so long - peterS. - [e-mail]

[Florian Stascheck]

Hallo,

Kleiner Tipp am Rande: http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=Labels

mfg, Flo