logo标签列表

使用JavaScript创建HTML表单输入标签的名称元素数组

javascripthtmlformsinput
25

这是一个两部分的问题。有人几天前回答了一个类似的问题（其中也包含了关于PHP中这种类型数组的信息），但我找不到它。

1.) 首先，对于表单中在名称元素末尾创建的数组，什么是正确的术语？

<form>

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

</form>

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();
            }
        }
    }
}
5个回答
49

首先，一个表单中使用name元素创建的数组，应该用什么术语来描述？

"PHP中常常令人困惑的用法"

就JavaScript而言，拥有相同名称的一组表单控件只是一组具有相同名称的表单控件。名称包含方括号的表单控件也只是名称包含方括号的表单控件。

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

这有点让人困惑，但一些其他语言自从原作者写这篇文章之后就采用了这种约定，但通常只作为可选功能。例如，通过JavaScript的此模块。

2.) 如何使用JavaScript从该数组中获取信息？

仍然只需从elements中获取与表单控件相同名称的属性即可。诀窍在于，由于表单控件的名称包括方括号，因此您不能使用点表示法，而必须像任何其他包含特殊字符的JavaScript属性名称一样使用方括号表示法。

由于您具有具有该名称的多个元素，因此它将成为一个集合而不是单个控件，因此您可以使用标准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];
}
1
谢谢，这正是我在寻找的。不过我稍微修改了一下... for(i = 0; i < document.form.elements['p_id[]'].length; i++) - ubiquibacon
3
将 i 作为全局变量使用并不是一个好主意（这只会让你遇到范围问题，无论是现在还是将来，因为你已经养成了不良习惯）。使用 document.form 是一种不好的做法，因为（a）document.forms 集合会更清晰地表明你正在做什么，form 不是一个非常详细的名称（而且 document.form 可能会与 document.forms 混淆，这会使维护更加混乱）。将代码压缩到单行中是可以的，但我只是更加明确地阐述了一下，以便你可以看到发生了什么。 - Quentin
1
@Quentin：for (var i...)实际上与var i; for (i ...)相同，因为JavaScript变量是函数作用域，而不是像许多流行的面向对象语言一样块作用域。 - Laoujin
1
@Laoujin - typoknig并没有说var i; for (i...)。 - Quentin
10

试试类似这样的代码：

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);
}
当表单元素是下拉列表时，我遇到了问题。您能否在 https://stackoverflow.com/questions/58994834/capture-selected-values-from-dynamic-drop-down-lists-using-javascript 上为我的问题提供解决方案？ - Michael Julyus Christopher M.
4

document.form.p_id.length ... 不是count()。

你真的应该给你的表单一个id。

<form id="myform">

然后使用以下方式引用它：
var theForm = document.getElementById("myform");

接着，参考以下元素：

for(var i = 0; i < theForm.p_id.length; i++){
3
为了按顺序回答您的问题：
1）这没有具体的名称。它只是具有相同名称（在这种情况下也是类型）的多个元素。名称不是唯一的，这就是为什么id被发明出来的原因（它应该是唯一的）。
2） 
function getElementsByTagAndName(tag, name) {
    //你可以传入起始元素，这样会更快
    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;
}
9
哇，这太难看了。使用new Array()而不是[]，保持长度跟踪器而不是使用arr.length或arr.push()，在for循环之外初始化i，使用getAttribute而不是直接获取名称属性，全局工作而不是在表单内部工作，并且所有的获取（多或少）都得到与document.forms.element.elements_name相同的结果。（哦，getElementsByName也可以使用）。 - Quentin
-3
以下是一些 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>";
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接