2010-02-03 75 views
0

我有這樣的HTML代碼的數組:如何獲得長度JavaScript表單文本字段

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

你打算做什麼* name =「item []」*? – 2010-02-03 18:01:12

回答

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

需要注意的是,嚴格的說,你的投入要素並不構成陣列。它們是DOM中的節點,所以你必須將它們作爲一個數組來找到。

我知道你說「沒有jQuery」,但在這個時代,當人們抵制使用類似工具時,它真的讓我感到困惑。他們解決了許多問題,你最終會解決你自己的問題

+0

謝謝,但我應該提到這是爲MOBILE IE,我不認爲有getElementById支持... – user265505 2010-02-03 18:00:58

+0

我會震驚得知它沒有getElementById()支持。現在,它可能會像在常規IE中那樣崩潰(它有時會返回基於「name」屬性的元素),但它完全缺失會很奇怪。然後,再假設微軟不會做這樣的事情可能不是個好主意。 – Pointy 2010-02-03 18:03:38

+0

謝謝你會證實我自己。 – user265505 2010-02-03 18:06:06

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

您好,請爲您的答案添加說明,這可能有助於更清楚地瞭解解決方案 – 2012-10-29 08:38:07