如何在 Javascript 中获取表单文本字段数组的长度答案

【问题标题】：How to get length in Javascript of an array of Form text fields如何在 Javascript 中获取表单文本字段数组的长度
【发布时间】：2010-02-03 17:55:08
【问题描述】：

我有这个 HTML 代码：

<form id="form1" name="form1" method="post" action="">
a <input type="text" name="item[]" value="1" /> <br />
b <input type="text" name="item[]" value="1" /> <br />
c <input type="text" name="item[]" value="1" />
</form>

我似乎无法以编程方式从文本字段数组中提取长度，是否有一些明显的纯 JavaScript 方式（请不要使用 Jquery）来做到这一点？我试过了

    <script language="javascript">
//Tried these combination
alert(document.form1.item.length);
alert(document.form1.item[].length);
alert(document.form1.elements['item'].length);
alert(document.form1.elements['item[]'].length);
</script>

【问题讨论】：

name="item[]" 的意图是什么？

标签： javascript arrays forms elements

【解决方案1】：

var inputCount = document.getElementById('form1').getElementsByTagName('input').length;

请注意，严格来说，您的输入元素不构成数组。它们是 DOM 中的节点，因此您必须将它们作为数组查找。

我知道你说过“不要使用 jQuery”，但在当今时代，当人们拒绝使用这样的工具时，我真的很困惑。他们解决了很多问题，否则你最终会自己解决。

【讨论】：

谢谢，但我应该提到这是针对我认为不支持 getElementById 的 MOBILE IE...
当我得知它不支持 getElementById() 时，我会感到震惊。现在，它可能像在常规 IE 中一样被破坏了（它有时会根据“name”属性返回元素），但如果完全丢失它会很奇怪。再说一次，假设微软不会做这种奇怪的事情可能是个坏主意。
:headslap：如果我是一名 MS Mobile 开发人员，我认为我的牙齿经不起磨砺 - 你有我的钦佩。

【解决方案2】：

    <script language="JavaScript" type="text/javascript"> 
    <!-- 
    function Total() { 
    var i, ordertotal, discount, total; 
    ordertotal = 0; 
    nitems = 4 
    for (i=1; i<nitems+1; i++) { 
        eval("document.orderform.Item" + i + "Total.value = '';"); 
            if (document.forms[0]['Item'+i].checked==true){       
            eval("total=Number(document.orderform['ItemPrice[' + i + ']' + '[' + 0 + ']'].value);"); 
            eval("document.orderform.Item" + i + "Total.value=Currency(total)"); 
            eval("ordertotal = ordertotal + total;"); 
        } 
    } 
    document.orderform.OrderTotal.value = Currency(ordertotal); 
    discount = ordertotal * .5 
    document.orderform.Discount.value = Currency(discount); 
    document.orderform.GrandTotal.value = Currency(ordertotal + discount); 
    } 
    function Currency(anynum) { 
    anynum = "" + eval(anynum); 
    intnum = parseInt(anynum); 
    intnum = Math.abs(intnum); 
    intstr = ""+intnum; 
    if (intnum >= 1000) { 
    intlen = intstr.length 
    temp1=parseInt(""+(intnum/1000)) 
    temp2=intstr.substring(intlen-3,intlen) 
    intstr = temp1+","+temp2 
    } 
    if (intnum >= 1000000) { 
    intlen = intstr.length 
    temp1=parseInt(""+(intnum/1000000)) 
    temp2=intstr.substring(intlen-7,intlen) 
    intstr = temp1+","+temp2 
    } 
    decnum = Math.abs(parseFloat(anynum)-parseInt(anynum)); 
    decnum = decnum * 100; 
    decstr = "" + Math.abs(Math.round(decnum)) 
    if (decstr.length>2) {decstr=decstr.substring(0,2)} 
    while (decstr.length < 2) {decstr="0"+decstr} 
    retval = intstr + "." + decstr 
    if (anynum < 0) { 
    retval="("+retval+")" 
    } 
    return "$"+retval 
    } 
    //--> 
</script> 

<form name="orderform"> 
    <table border="0" cellpadding="0" cellspacing="0" width="723">      

    <tr> 
        <th>Java script to calculate price with the double dimension arrays </th>
        <th>origional script modified by amarjit lehal :lehal2@hotmail.com</th>
        <th width="89" align="center" bgcolor="#F0F8FF" height="33">Item</th> 
        <th width="356" bgcolor="#F0F8FF" height="33">Description</th> 
        <th width="100" align="center" bgcolor="#F0F8FF" height="33">Price</th> 
        <th width="95" align="center" bgcolor="#F0F8FF" height="33">Total</th> 
    </tr> 
    <tr> 
        <td width="89" align="center" height="23" bgcolor="#F0F8FF"> 
        <input type="checkbox" name="Item1" value="1" onClick="Total();"></td> 
        <td width="356" height="23" bgcolor="#F0F8FF">Item1!</td> 
        <td width="100" align="center" height="23" bgcolor="#F0F8FF">$
        <input type="text" onfocus="this.blur();" name="ItemPrice[1][0]" size="9" value="5.50"></td> 
        <td width="95" align="center" height="23" bgcolor="#F0F8FF">
        <input type="text" onfocus="this.blur();" name="Item1Total" size="10"></td> 
    </tr> 
    <tr> 
        <td width="89" align="center" height="23" bgcolor="#F0F8FF"> 
        <input type="checkbox" name="Item2" onClick="Total();" value="1"></td> 
        <td width="356" height="23" bgcolor="#F0F8FF">Item2</td> 
        <td width="100" align="center" height="23" bgcolor="#F0F8FF">$
        <input type="text" onfocus="this.blur();" name="ItemPrice[2][0]" size="9" value="10.50"></td> 
        <td width="95" align="center" height="23" bgcolor="#F0F8FF">
        <input type="text" onfocus="this.blur();" name="Item2Total" size="10"></td> 
    </tr> 
    <tr> 
        <td width="89" align="center" height="23" bgcolor="#F0F8FF"> 
        <input type="checkbox" name="Item3" onClick="Total();" value="1"></td> 
        <td width="356" height="23" bgcolor="#F0F8FF">Item3</td> 
        <td width="100" align="center" height="23" bgcolor="#F0F8FF">$
        <input type="text" onfocus="this.blur();" name="ItemPrice[3][0]" size="9" value="20.50"></td> 
        <td width="95" align="center" height="23" bgcolor="#F0F8FF">
        <input type="text" onfocus="this.blur();" name="Item3Total" size="10"></td> 
    </tr> 
    <tr> 
        <td width="89" align="center" height="23" bgcolor="#F0F8FF"> 
        <input type="checkbox" name="Item4" onClick="Total();" value="1"></td> 
        <td width="356" height="23" bgcolor="#F0F8FF">Item4</td> 
        <td width="100" align="center" height="23" bgcolor="#F0F8FF">$
        <input type="text" onfocus="this.blur();" name="ItemPrice[4][0]" size="9" value="30.50"></td> 
        <td width="95" align="center" height="23" bgcolor="#F0F8FF">
        <input type="text" onfocus="this.blur();" name="Item4Total" size="10"></td> 
    </tr> 
    <tr> 
        <td width="546" align="center" height="23" colspan="3" bgcolor="#F0F8FF"> 
        <div align="right"> 
            <p>Order Total&nbsp; 
        </div> 
        </td> 
        <td width="95" align="center" height="23" bgcolor="#F0F8FF">
        <input type="text" onfocus="this.blur();" name="OrderTotal" size="10"></td> 
    </tr> 
    <tr> 
        <td width="546" align="center" height="23" colspan="3" bgcolor="#F0F8FF"> 
        <div align="right"> 
            <p>Discount&nbsp; 
        </div> 
        </td> 
        <td width="95" align="center" height="23" bgcolor="#F0F8FF">
        <input type="text" onfocus="this.blur();" name="Discount" size="10"></td> 
    </tr> 
    <tr> 
        <td width="546" align="center" height="23" colspan="3" bgcolor="#F0F8FF"> 
        <div align="right"> 
            <p>Grand Total&nbsp; 
        </div> 
        </td> 
        <td width="95" align="center" height="23" bgcolor="#F0F8FF">
        <input type="text" onfocus="this.blur();" name="GrandTotal" size="10"></td> 
    </tr> 
</table> 
        <p><input name="Submit" type="Submit" value="Submit"></p> 
</form>

【讨论】：

您好，请为您的答案添加描述，这可能有助于更清楚地理解解决方案