Как получить длину в Javascript массива текстовых полей формы

Question

У меня есть этот 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>

Answer 1

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

Обратите внимание, что, строго говоря, ваши входные элементы не составляют массив. Они являются узлами в DOM, поэтому вы должны найти их как массив.

Я знаю, что вы сказали "нет jQuery", но в наши дни это действительно сбивает с толку, когда люди сопротивляются использованию подобных инструментов. Они решают много проблем, которые иначе вы решите сами.

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