Verwenden Sie Klammern im Kontrollkästchen Name bei der Verwendung von PHP und Javascript?

Question

i ein Formular mit Kontrollkästchen wie dieses:

<input type="checkbox" name="type[]" value="1" />Fast Food<br> 
    <input type="checkbox" name="type[]" value="2" />Table Service<br> 
    <input type="checkbox" name="type[]" value="3" />Cafeteria<br> 

, wenn ich die Klammern im Namen verwenden (Typ []), meine php funktioniert:

$type=$_POST['type']; 

    echo "types are:"; 
for ($counter = 0; $counter < sizeof($type); $counter += 1) { 
    echo "<br>".$type[$counter]; 
} 

aber mein Javascript funktioniert nicht :

var f = document.addform; 
    for (var i=0;i<f.type.length;i++){ 
     if(f.type[i].checked==true){ 
      break; 
     } 
     if(i==(f.type.length-1)){ 
      alert("No categories entered!"); 
      valid=false; 
     } 
    } 

jedoch, wenn ich die Klammern wegzunehmen:

<input type="checkbox" name="type" value="1" />Fast Food<br> 

dann funktioniert das PHP nicht, aber das Javascript tut.

was geht hier vor? Was soll ich verwenden?

danke.

Answer 1

PHP verfügt über ein ungewöhnliches System zur Verarbeitung mehrerer Formularsteuerelemente mit demselben Namen. Es wird erwartet, dass die Namen [] enthalten, sie werden jedoch nicht im Variablennamen verwendet.

JavaScript hat dieses Problem nicht. Die Eigenschaft wird weiterhin die Klammern haben.

Natürlich haben eckige Klammern in JS eine besondere Bedeutung, daher können Sie die Punktnotation nicht verwenden, um auf die Eigenschaft zuzugreifen.

f['type[]'][i].checked 

Answer 2

In Javascript können Sie f['type[]'] anstelle von f.type verwenden. Es ist nur PHP, das [] in Array ändert.

Answer 3

Natürlich können Sie auch einen "Schlüssel" zwischen die eckigen Klammern setzen (dh jedem Feld einen eindeutigen Namen geben). Etwas wie 'type [1]', 'type [2]' und 'type [3]'. PHP wirft es immer noch in ein Array (durch diese Zahlen kodiert) und JS könnte auch darauf zugreifen.

Answer 4

Sie können immer document.getElementsByName() verwenden, weil es eine Zeichenfolge als Argument benötigt.

So:

var f = document.getElementsByName("type[]"); 
for (var i=0; i < f.length; i++){ 
    if(f[i].checked == true){ 
     break; 
    } 
    if(i == (f.length-1)){ 
     alert("No categories entered!"); 
     valid=false; 
    } 
}