使用 JavaScript 的 HTML 表单输入标签名称元素数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3234205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML form input tag name element array with JavaScript
提问by ubiquibacon
This is a two part question. Someone answered a similar question the other day (which also contained info about this type of array in PHP), but I cannot find it.
这是一个两部分的问题。前几天有人回答了一个类似的问题（其中还包含有关 PHP 中此类数组的信息），但我找不到它。
1.) First off, what is the correct terminology for an array created on the end of the name element of an input tag in a form?
1.) 首先，在表单中输入标签的名称元素末尾创建的数组的正确术语是什么？
<form>
<input name="p_id[]" value="0"/>
<input name="p_id[]" value="1"/>
<input name="p_id[]" value="2"/>
</form>
2.) How do I get the information from that array with JavaScript? Specifically, I am right now just wanting to count the elements of the array. Here is what I did but it isn't working.
2.) 如何使用 JavaScript 从该数组中获取信息？具体来说，我现在只想计算数组的元素。这是我所做的，但它不起作用。
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();
}
}
}
}
回答by Quentin
1.) First off, what is the correct terminology for an array created on the end of the name element of an input tag in a form?
1.) 首先，在表单中输入标签的名称元素末尾创建的数组的正确术语是什么？
"Oftimes Confusing PHPism"
“经常混淆 PHP 主义”
As far as JavaScript is concerned a bunch of form controls with the same name are just a bunch of form controls with the same name, and form controls with names that include square brackets are just form controls with names that include square brackets.
就JavaScript而言，一堆同名的表单控件只是一堆同名的表单控件，名称中包含方括号的表单控件只是名称中包含方括号的表单控件。
The PHP naming convention for form controls with the same name is sometimes useful (when you have a number of groups of controls so you can do things like this:
具有相同名称的表单控件的 PHP 命名约定有时很有用（当您有多个控件组时，您可以执行以下操作：
<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">
) but does confuse some people. Some other languages have adopted the convention since this was originally written, but generally only as an optional feature. For example, via this module for JavaScript.
) 但确实让一些人感到困惑。自最初编写以来，其他一些语言已采用该约定，但通常仅作为可选功能。例如，通过JavaScript 的这个模块。
2.) How do I get the information from that array with JavaScript?
2.) 如何使用 JavaScript 从该数组中获取信息？
It is still just a matter of getting the property with the same name as the form control from elements. The trick is that since the name of the form controls includes square brackets, you can't use dot notation and have to use square bracket notationjust like any other JavaScript property name that includes special characters.
仍然只是获取与表单控件同名的属性elements。诀窍在于，由于表单控件的名称包含方括号，因此您不能使用点表示法，而必须像任何其他包含特殊字符的 JavaScript 属性名称一样使用方括号表示法。
Since you have multiple elements with that name, it will be a collection rather then a single control, so you can loop over it with a standard for loop that makes use of its length property.
由于您有多个具有该名称的元素，因此它将是一个集合而不是单个控件，因此您可以使用利用其 length 属性的标准 for 循环遍历它。
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];
}
回答by Matt King
Try this something like this:
试试这个：
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);
}
回答by Andir
document.form.p_id.length... not count().
document.form.p_id.length...不计数（）。
You really should give your form an id
你真的应该给你的表单一个 id
<form id="myform">
Then refer to it using:
然后使用以下方法引用它：
var theForm = document.getElementById("myform");
Then refer to the elements like:
然后参考如下元素：
for(var i = 0; i < theForm.p_id.length; i++){
回答by jmoreno
To answer your questions in order:
1) There is no specific name for this. It's simply multiple elements with the same name (and in this case type as well). Name isn't unique, which is why id was invented (it's supposed to be unique).
2)
按顺序回答您的问题：
1) 没有具体名称。它只是具有相同名称的多个元素（在这种情况下也是类型）。Name 不是唯一的，这就是发明 id 的原因（它应该是唯一的）。
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;
}
回答by John
Here's some PHP and JavaScript demonstration code that shows a simple way to create indexed fields on a form (fields that have the same name) and then process them in both JavaScript and PHP. The fields must have both "ID" names and "NAME" names. Javascript uses the ID and PHP uses the NAME.
下面是一些 PHP 和 JavaScript 演示代码，展示了一种在表单上创建索引字段（具有相同名称的字段）的简单方法，然后在 JavaScript 和 PHP 中处理它们。这些字段必须同时具有“ID”名称和“NAME”名称。Javascript 使用 ID，PHP 使用 NAME。
<?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>";
