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

IT技术 javascript html forms input
2021-03-09 00:07:53

这是一个两部分的问题。前几天有人回答了类似的问题（其中还包含有关 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个回答

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

“经常混淆 PHPism”

就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 的这个module。

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

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

由于您有多个具有该名称的元素，因此它将是一个集合而不是单个控件，因此您可以使用利用其 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];
}
@Quentin：for (var i...)实际上是var i; for (i ...)因为JavaScript 变量是函数作用域的，而不是像许多流行的 OO 语言那样是块作用域的。
2021-04-22 00:07:53
谢谢，这正是我要找的。不过我稍微修改了一下...for(i = 0; i < document.form.elements['p_id[]'].length; i++)
2021-04-26 00:07:53
使用i作为一个全球性是不是一个好主意（它只是要求目前范围的问题咬你，要么还是在未来，因为你已经陷入坏习惯）。使用document.form是不好的做法，因为 (a)document.forms集合将使您更清楚地了解您在做什么，form并且不是一个非常详细的名称（并且document.form可能与document.forms使维护更加混乱的名称混淆。不过，将内容整理成一行是可以的，我只是更明确，所以你可以看到发生了什么。
2021-04-26 00:07:53
@Laoujin - 打字机没有说var i; for (i ...)。
2021-04-29 00:07:53

试试这个：

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);
}
当表单元素是下拉列表时，我遇到了问题。你能给我解决我在stackoverflow.com/questions/58994834/...
2021-05-20 00:07:53

document.form.p_id.length ...不是计数（）。

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

<form id="myform">

然后使用以下方法引用它：

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

然后参考如下元素：

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

按顺序回答您的问题：
1) 没有具体名称。它只是具有相同名称的多个元素（在这种情况下也是类型）。Name 不是唯一的，这就是 id 被发明的原因（它应该是唯一的）。
2) 

函数 getElementsByTagAndName(tag, name) {
    //您可以传入起始元素，这将使这更快
    var elem = document.getElementsByTagName(tag);  
    var arr = new Array();
    变量 i = 0;
    变量 iarr = 0;
    无功；
    for(; i < elem.length; i++) {
        att = elem[i].getAttribute("name");
        if(att == 名字) {
            arr[iarr] = elem[i];
            iarr++;
        }
    }
    返回 arr;
}
哇。那只是丑陋。使用new Array()而不是[]，保持长度跟踪器而不是使用arr.lengthor arr.push()，i在 for 循环外初始化，使用getAttribute而不是仅仅使用name 属性，全局工作而不是在表单内工作，并且所有得到（或多或少）相同的结果document.forms.element.elements_name. （哦，getElementsByName也可以使用）。
2021-05-15 00:07:53

下面是一些 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>";
其它你可能感兴趣的问题
上一篇Angular 路由模板 url 是否支持 ASP.Net MVC 5 项目中的 *.cshtml 文件？ 下一篇如何使用 HTML 和 CSS 作为 Java 应用程序 GUI？