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

发布于 2024-08-20 07:22:22 字数 665 浏览 5 评论 0原文

我有这个 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>

原文

I have this HTML code:

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

I can't seem to pro grammatically pull the length out of the text fields array , is there some obvious plain JavaScript way (no Jquery please) to do this? I tried

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一场春暖 2024-08-27 07:22:22

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

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

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

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

Note that, strictly speaking, your input elements do not constitute an array. They're nodes in the DOM, so you have to find them as an array.

I know you said "no jQuery", but in this day and age it really perplexes me when people are resistant to using tools like that. They solve lots of problems that you'll otherwise end up solving yourself.

回复收藏 0 原文

半透明的墙 2024-08-27 07:22:22

    <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 :[email protected]</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  
        </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  
        </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  
        </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>

    <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 :[email protected]</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  
        </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  
        </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  
        </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>

回复收藏 0 原文

~没有更多了~