js如何獲取某一類type屬性值表單元素

admin發表於2017-03-19
JS

input表單元素通過type屬性可以宣告為不同的型別，如文字框、按鈕、單選按鈕和核取方塊等，但是在實際應用中往往只需要其中的某一種型別，下面就以獲取文字為例子做一下簡單介紹。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript">  
window.onload=function()  
{  
  var myform=document.getElementById("myform");
  var bt=document.getElementById("bt");
  var eleArray=myform.elements;
  var textEle=[];
  var index=0;
  for(var i=0;i<eleArray.length;i++)
  {
    if (eleArray[i].type == "text")
    {
      textEle[index]=eleArray[i];
      index++;
    }
  }
  bt.onclick=function(){alert(textEle.length)}
}  
</script>  
</head>  
<body>  
<form id="myform" action="http://www.softwhy.com">  
<ul>  
  <li>使用者名稱:<input type="text" name="username" /></li>  
  <li>密碼：<input type="text" name="pw" /></li>  
  <li><input type="reset" value="重置" /><input type="submit" value="提交" /></li>  
</ul>  
</form>  
<input type="button" value="點選檢視結果" id="bt" />
</body>  
</html>

以上程式碼可以將單行文字框元素放入一個陣列，然後點選按鈕之後彈出文字框的數目。

相關閱讀:

1.elements屬性可以參閱javascript的form的elements屬性一章節。

2.type屬性可以參閱javascript text.type屬性一章節。 

3.onclick事件可以參閱javascript click 事件一章節。

相關文章