2010-07-13 20 views
18

Questa è una domanda in due parti. Qualcuno ha risposto ad una domanda simile l'altro giorno (che conteneva anche informazioni su questo tipo di array in PHP), ma non riesco a trovarlo.HTML form nome tag elemento array con JavaScript

1.) Prima di tutto, qual è la terminologia corretta per un array creato alla fine dell'elemento nome di un tag di input in un modulo?

<form> 

    <input name="p_id[]" value="0"/> 
    <input name="p_id[]" value="1"/> 
    <input name="p_id[]" value="2"/> 

</form> 

2.) Come ottengo le informazioni da quell'array con JavaScript? Nello specifico, in questo momento sto solo contando gli elementi dell'array. Ecco cosa ho fatto ma non funziona.

function form_check(){ 
    for(var i = 0; i < count(document.form.p_id[]); i++){ //Error on this line 

     if (document.form.p_name[i].value == ''){ 
      window.alert('Name Message'); 
      document.form.p_name[i].focus(); 
      break; 
     } 

     else{ 
      if (document.form.p_price[i].value == ''){ 
       window.alert('Price Message'); 
       document.form.p_price[i].focus(); 
       break; 
      } 

      else{ 
       update_confirmation(); 
      } 
     } 
    } 
} 

risposta

37

1.) Prima di tutto, qual è la terminologia corretta per un array creato alla fine di th e nome elemento di un tag di input in un modulo?

"PHPism oftimes Confondere"

Per quanto riguarda JavaScript una serie di controlli di modulo con lo stesso nome sono solo un mucchio di controlli di modulo con lo stesso nome, e controlli di modulo con i nomi che includono piazza le parentesi quadre sono solo controlli di forma con nomi che includono parentesi quadre.

La convenzione di denominazione PHP per i controlli dei moduli con lo stesso nome è a volte utile (quando si dispone di un certo numero di gruppi di controlli in modo da poter fare le cose in questo modo:

<input name="name[1]"> 
<input name="email[1]"> 
<input name="sex[1]" type="radio" value="m"> 
<input name="sex[1]" type="radio" value="f"> 

<input name="name[2]"> 
<input name="email[2]"> 
<input name="sex[2]" type="radio" value="m"> 
<input name="sex[2]" type="radio" value="f"> 

) ma confonde alcune persone. Alcuni altri linguaggi hanno adottato la convenzione poiché questa era stata originariamente scritta, ma in genere solo come una caratteristica opzionale. Ad esempio, tramite this module for JavaScript.

2.) Come ottengo le informazioni da quell'array con JavaScript?

È ancora solo una questione di ottenere la proprietà con lo stesso nome del controllo di modulo da elements. Il trucco è che, poiché il nome dei controlli del modulo include parentesi quadre, non è possibile utilizzare dot notation and have to use square bracket notation come qualsiasi altro JavaScript property name that includes special characters.

Poiché si hanno più elementi con quel nome, sarà una raccolta piuttosto che un singolo controllo, quindi è possibile eseguire il loop su di esso con un ciclo for standard che utilizza la sua proprietà length.

var myForm = document.forms.id_of_form; 
var myControls = myForm.elements['p_id[]']; 
for (var i = 0; i < myControls.length; i++) { 
    var aControl = myControls[i]; 
} 
+0

Grazie, questo è esattamente quello che stavo cercando. L'ho modificato un po 'però ... 'per (i = 0; i ubiquibacon

+2

Usare 'i' come globale non è una buona idea (ti sta solo chiedendo di risolvere i problemi con gli obiettivi, sia ora che in futuro perché hai preso brutte abitudini). Usare 'document.form' è una cattiva pratica perché (a) la raccolta' document.forms' renderà più chiaro quello che stai facendo e 'form' non è un nome molto dettagliato (e' document.form' potrebbe essere confuso con 'document.forms' che rende la manutenzione più confusa.Eseguire lo scrunch su una singola riga va bene, ero solo più esplicito in modo da poter vedere cosa sta succedendo – Quentin

+1

@Quentin:' for (var i ...) 'è in effetti lo stesso di' var i; for (i ...) 'perché [le variabili JavaScript sono scope funzione] (http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html), non a livello di blocco come nel caso di molti linguaggi OO popolari – Laoujin

3

document.form.p_id.length ... non contare().

si dovrebbe davvero dare il vostro modulo di un ID

<form id="myform"> 

quindi fare riferimento ad esso utilizzando:

var theForm = document.getElementById("myform"); 

quindi fare riferimento agli elementi come:

for(var i = 0; i < theForm.p_id.length; i++){ 
9

Prova questa qualcosa di simile:

var p_ids = document.forms[0].elements["p_id[]"]; 
alert(p_ids.length); 
for (var i = 0, len = p_ids.length; i < len; i++) { 
    alert(p_ids[i].value); 
} 
2

di rispondere alle vostre domande in ordine:
1) Non v'è alcun nome specifico per questo. Sono semplicemente più elementi con lo stesso nome (e anche in questo caso digita). Il nome non è unico, motivo per cui è stato inventato id (dovrebbe essere unico).
2)

 
function getElementsByTagAndName(tag, name) { 
    //you could pass in the starting element which would make this faster 
    var elem = document.getElementsByTagName(tag); 
    var arr = new Array(); 
    var i = 0; 
    var iarr = 0; 
    var att; 
    for(; i < elem.length; i++) { 
     att = elem[i].getAttribute("name"); 
     if(att == name) { 
      arr[iarr] = elem[i]; 
      iarr++; 
     } 
    } 
    return arr; 
} 
+6

Wow. È semplicemente brutto. Uso 'new Array() 'invece di' [] ', mantenendo un tracker di lunghezza invece di usare' arr.length' o 'arr.push()', inizializzando 'i' al di fuori del ciclo for, usando' getAttribute' invece di andare avanti per la proprietà name, che funziona a livello globale anziché all'interno di un modulo, e tutti i get (più o meno) gli stessi risultati di 'document.forms.element.elements_name'. (Oh e 'getElementsByName' avrebbe potuto essere usato anche). – Quentin

0

Ecco alcuni PHP e JavaScript codice dimostrativo che mostra un modo semplice per creare campi indicizzati in un modulo (campi che hanno lo stesso nome) e poi elaborarli in JavaScript e PHP. I campi devono avere sia nomi "ID" che nomi "NAME". Javascript usa l'ID e PHP usa il NOME.

<?php 
// How to use same field name multiple times on form 
// Process these fields in Javascript and PHP 
// Must use "ID" in Javascript and "NAME" in PHP 
echo "<HTML>"; 
echo "<HEAD>"; 
?> 
<script type="text/javascript"> 
function TestForm(form) { 
// Loop through the HTML form field (TheId) that is returned as an array. 
// The form field has multiple (n) occurrences on the form, each which has the same name. 
// This results in the return of an array of elements indexed from 0 to n-1. 
// Use ID in Javascript 
var i = 0; 
document.write("<P>Javascript responding to your button click:</P>"); 
for (i=0; i < form.TheId.length; i++) { 
    document.write(form.TheId[i].value); 
    document.write("<br>"); 
} 
} 
</script> 
<?php 
echo "</HEAD>"; 
echo "<BODY>"; 
$DQ = '"'; # Constant for building string with double quotes in it. 

if (isset($_POST["MyButton"])) { 
    $TheNameArray = $_POST["TheName"]; # Use NAME in PHP 
    echo "<P>Here are the names you submitted to server:</P>"; 
    for ($i = 0; $i <3; $i++) { 
    echo $TheNameArray[$i] . "<BR>"; 
    } 
} 
echo "<P>Enter names and submit to server or Javascript</P>"; 
echo "<FORM NAME=TstForm METHOD=POST ACTION=" ; 
echo $DQ . "TestArrayFormToJavascript2.php" . $DQ . "OnReset=" . $DQ . "return allowreset(this)" . $DQ . ">"; 
echo "<FORM>"; 
echo "<INPUT ID = TheId NAME=" . $DQ . "TheName[]" . $DQ . " VALUE=" . $DQ . "" . $DQ . ">"; 
echo "<INPUT ID = TheId NAME=" . $DQ . "TheName[]" . $DQ . " VALUE=" . $DQ . "" . $DQ . ">"; 
echo "<INPUT ID = TheId NAME=" . $DQ . "TheName[]" . $DQ . " VALUE=" . $DQ . "" . $DQ . ">"; 
echo "<P><INPUT TYPE=submit NAME=MyButton VALUE=" . $DQ . "Submit to server" . $DQ . "></P>"; 
echo "<P><BUTTON onclick=" . $DQ . "TestForm(this.form)" . $DQ . ">Submit to Javascript</BUTTON></P>"; 
echo "</FORM>"; 
echo "</BODY>"; 
echo "</HTML>";