web-dev-qa-db-fra.com

Tableau d'éléments de nom de balise d'entrée de formulaire HTML avec JavaScript

C'est une question en deux parties. Quelqu'un a répondu à une question similaire l'autre jour (qui contenait également des informations sur ce type de tableau en PHP), mais je ne le trouve pas.

1.) Tout d'abord, quelle est la terminologie correcte pour un tableau créé à la fin de l'élément de nom d'une balise d'entrée dans un formulaire?

<form>

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

</form>

2.) Comment puis-je obtenir les informations de ce tableau avec JavaScript? Plus précisément, je veux en ce moment simplement compter les éléments du tableau. Voici ce que j'ai fait mais ça ne marche pas.

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();
            }
        }
    }
}
javascripthtmlformsinput
21
ubiquibacon

1.) Tout d'abord, quelle est la terminologie correcte pour un tableau créé à la fin de l'élément de nom d'une balise d'entrée dans un formulaire?

"Souvent confondre le PHPisme"

En ce qui concerne JavaScript, un tas de contrôles de formulaire avec le même nom ne sont que des tas de contrôles de formulaire avec le même nom, et les contrôles de formulaire avec des noms qui incluent des crochets ne sont que des contrôles de formulaire avec des noms qui incluent des crochets.

La convention de dénomination PHP pour les contrôles de formulaire avec le même nom est parfois utile (lorsque vous avez un certain nombre de groupes de contrôles afin que vous puissiez faire des choses comme ceci:

<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">

), mais déroute certaines personnes. Certaines autres langues ont adopté la convention depuis qu'elle a été rédigée à l'origine, mais généralement uniquement en tant que fonctionnalité facultative. Par exemple, via ce module pour JavaScript .

2.) Comment puis-je obtenir les informations de ce tableau avec JavaScript?

Il s'agit toujours d'obtenir la propriété avec le même nom que le contrôle de formulaire à partir de elements. L'astuce est que, puisque le nom des contrôles de formulaire comprend des crochets, vous ne pouvez pas utiliser notation par points et devez utiliser la notation entre crochets comme tout autre nom de propriété JavaScript qui inclut des caractères spéciaux caractères .

Puisque vous avez plusieurs éléments avec ce nom, il s'agira d'une collection plutôt que d'un seul contrôle, vous pouvez donc faire une boucle dessus avec une boucle for standard qui utilise sa propriété 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];
}
42
Quentin

Essayez quelque chose comme ceci:

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);
}
9
Matt King

document.form.p_id.length ... pas compté().

Vous devriez vraiment donner à votre formulaire un identifiant

<form id="myform">

Référez-vous-y ensuite en utilisant:

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

Référez-vous ensuite aux éléments comme:

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

Pour répondre à vos questions dans l'ordre:
1) Il n'y a pas de nom spécifique pour cela. Il s'agit simplement de plusieurs éléments portant le même nom (et dans ce cas également). Le nom n'est pas unique, c'est pourquoi id a été inventé (il est censé être unique).
2)

 function getElementsByTagAndName (tag, name) {
 // vous pourriez passer l'élément de départ qui rendrait cela plus rapide 
 var elem = document.getElementsByTagName (tag); 
 var arr = nouveau tableau (); 
 var i = 0; 
 var iarr = 0; 
 var att; 
 pour (; i <elem.length; i ++) {
 att = elem [i] .getAttribute ("nom"); 
 if (att == nom) {
 arr [iarr] = elem [i]; 
 iarr ++; 
} 
} 
 return arr; 
}
2
jmoreno