[JS forms] Iterare Array Associativo di input

[marmz]

Ho un form del genere (uso checkbox, ma il discorso vale per qualunque input)

<form name="myform" id="myform" method="POST" action="">
   <input type="checkbox" name="mychecks[]" value="1" checked><br>
   <input type="checkbox" name="mychecks[]" value="2" checked><br>
   <input type="checkbox" name="mychecks[]" value="3" checked><br>
   <input type="checkbox" name="mychecks[]" value="4" checked><br>
   <input type="checkbox" name="mychecks[]" value="5" checked><br>
</form>

in questa situazione, posso "iterare" il mio array di input cosi':

var check_list = document.forms['myform'].elements[ 'mychecks[]' ];


for(check in check_list)
{
   if (check_list[check].checked) console.log(check_list[check].value);
}

o selezionare un "singolo" elemento cosi':

console.log(check_list[3].value);

Ma se invece volessi usare un array associativo, tipo:

<input type="checkbox" name="mychecks[primo]" value="1" checked><br>
<input type="checkbox" name="mychecks[secondo]" value="2" checked><br>
<input type="checkbox" name="mychecks[terzo]" value="3" checked><br>
<input type="checkbox" name="mychecks[quarto]" value="4" checked><br>

come posso accedere/iterare i campi??


il selettore "mychecks[]" non funziona!!!!

[lucavizzi]

"elements" non è altro che un array, i cui indici sono composti dai name dei campi del modulo.
Se più elementi del form hanno lo stesso name, ad esempio: "el_name", elements['el_name'] conterrà a sua volta un array con tutti gli oggetti del DOM con quel name.

Nell'array "elements" quindi, il name/indice "mycheck[primo]" è diverso dal name/indice "mycheck[secondo]"
ecco perché document.forms['myform'].elements[ 'mychecks[]' ]; non funziona se cambi i name delle checkbox.

Per individuare, all'interno del modulo, degli elementi con names non uguali, bisogna usare altri "elementi di aggregazione", che variano da modulo a modulo.

Questo esempio utilizza sempre l'array "elements" e filtra le checkbox in base al loro name:

//tutti gli elementi del form
var el_list = document.forms['myform'].elements; 

//array che conterrà le checkbox
var check_list=[]; 

//scorro gli elementi del modulo "myform"
for(var i=0; i<el_list.length; i++){
    
    //se il name dell'input contiene la stringa 'mychecks'
    if(el_list[i].name.indexOf('mychecks')>-1){

        check_list.push(el_list[i]); //aggiungo il checkbox all'array check_list

    }
    
     /*per la verifica avrei potuto usare l'attributo type: 
    if(el_list[i].type=='checkbox')
    nel caso in cui le checkbox da selezionare siano le uniche checkbox nel modulo
    oppure altri criteri come, ad esempio, una classe o un data-attribute*/

}

Un'alternativa, utilizzando il DOM3, potrebbe essere:

var check_list = document.querySelectorAll('input[name^="mychecks"]');

Oppure con jQuery:

var check_list = $('input[name^="mychecks"]');

Notare l'identica sintassi tra jQuery e l'ultima versione del DOM che, a quanto pare, ha preso a piene mani da jQuery.

[marmz]

Un'alternativa, utilizzando il DOM3, potrebbe essere:

codice:
var check_list = document.querySelectorAll('input[name^="mychecks"]');

Bella! Questa mi piace

[EDIT]

Ah.. ehm .. ma come siamo messi a compatibilità con "querySelector" ??

[lucavizzi]

Bella! Questa mi piace

[EDIT]

Ah.. ehm .. ma come siamo messi a compatibilità con "querySelector" ??

Il browser deve supportare la versione 3 del DOM.
Per la retrocompatibilità devi usare jQuery.