How to get length in Javascript of an array of Form text fields

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 gr开发者_如何学Goammatically 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>

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.

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