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

Question

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>

what did you intend by name="item[]"?

Naeem Sarfraz
– Naeem Sarfraz

2010-02-03 18:01:12 +00:00
Commented Feb 3, 2010 at 18:01 — Naeem Sarfraz
– Naeem Sarfraz, Commented Feb 3, 2010 at 18:01

Pointy · Accepted Answer · 2010-02-03 17:58:49Z

2

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.

answered Feb 3, 2010 at 17:58

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user265505 Over a year ago

Thanks but I should mention this is for MOBILE IE which I don't think has getElementById support...

Pointy Over a year ago

I would be shocked to learn that it has no getElementById() support. Now, it's probably broken like it is in regular IE (it returns elements based on the "name" attribute sometimes), but it would be pretty weird for it to be missing completely. Then again, assuming Microsoft wouldn't do something weird like that is probably a bad idea.

Pointy Over a year ago

:headslap: I don't think my teeth could stand the grinding if I were an MS Mobile developer - you have my admiration.

amarjit singh lehal · Accepted Answer · 2012-04-18 15:01:52Z

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

Hi please add description for your answer it may help to understand the solution more clearly

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related