Comment obtenir la longueur en Javascript d'un tableau de champs de formulaire texte

Question

Je possède ce code 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> 

Je ne peux pas sembler pro tirer grammaticalement la longueur hors du champs de texte tableau, est-il un façon simple JavaScript évident (pas Jquery s'il vous plaît) pour ce faire? J'ai essayé

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

Notez que, strictement parlant, vos éléments d'entrée ne constituent pas un tableau. Ce sont des nœuds dans le DOM, vous devez donc les trouver sous forme de tableau.

Je sais que vous avez dit «pas de jQuery», mais de nos jours, cela me laisse vraiment perplexe lorsque les gens sont réticents à utiliser des outils comme celui-là. Ils résolvent lots des problèmes que vous finirez par résoudre vous-même.

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>