js獲取表單元素
阿新 • • 發佈：2018-12-11
一、獲取表單
1.當檔案中出現多個form表單時.可以用document.forms[0],document.forms[1]來代替.
<form name="tt" id="t"></form>
function checkform(id)
{
var formlist = document.getElementById(id).childNodes;
for(var i=0;i<formlist.length;i++)
{
alert(formlist[i].type)
}
}2.all[] 對所有html元素的訪問，element獲取所有表單元素
window.onload=function(){ var form=document.myform var element=form.elements } <body> <form name="myform"> <input type="text" name="username" value="softwhy.com"><br> <input type="text" name="address" value="青島市南區"><br> <select name="kecheng"> <option value="css教程" selected="">css教程</option> <option value="div教程">div教程</option> </select> </form> <input type="button" id="bt" value="檢視效果"/> </body>
3.forms[1] 對所有form物件引用
<script type="text/javascript"> function fun(){ document.all[11].innerHTML = "你好" ; document.forms[1].username.value = "張無忌" ; document.images[2].src = "images/1.jpg" ; } </script> <body onload = "fun()"> <P></p> <form method="post" action=""> 姓名1:<input type="text" name=""> </form> <form method="post" action=""> 姓名2:<input type="text" name="username"> </form> <form method="post" action=""> 姓名3:<input type="text" name=""> </form> <img src = "" alt = "aa"><img src = "" alt = "bb"><img src = "" alt = "cc"> </body>
取出窗體中的所有表單的數量:document.forms.length
二、獲取表單中的標籤元素
<form id="form1" name="form1">
文字框 ：<input type="text" id="txt" value="txt" />
<br />
單選按鈕：<input type="radio" value="男" name="sex" />男 <input type="radio" value="女" name="sex" checked="checked"/>女
<br />
複選框：<input type="checkbox" value="1" name="check[]"/>1<input type="checkbox" value="2" checked="checked" name="check[]" />2<input type="checkbox" value="3" checked="checked" name="check[]" />3
<br />
下拉框：
<select id="sel" style="width: 100px">
<option value="yi">1</option>
<option value="er" selected="selected">2</option>
<option value="san">3</option>
</select>
<br />
<input type="button" value="獲取" onclick="getVal()"/>
</form><script type="text/javascript">
function getVal(){
var str="";
//獲取單選按鈕的值
var radios = document.form1.sex;
var n = radios.length;
for (var i = 0; i < n; i++) {
if (radios[i].checked) {
str = " 單選 "+radios[i].value;
}
}
//還有獲取單選框的值有三種方式：
$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='sex']:checked").val();
//獲取複選框中選中的值的組合 1,2,3,4
var checkboxs = document.getElementsByName('check[]');
var n = checkboxs.length;
for (var i = 0; i < n; i++) {
if (checkboxs[i].checked) {
str += " 複選框 "+checkboxs[i].value;
}
}
//獲取下拉列表的選中項的值
//方法一：
str += " 列表 一："+document.getElementById("sel").value;
//方法二：
var sel = document.getElementById("sel");
str += " 列表 二："+sel.options[sel.selectedIndex].value;
alert(str);
}
</script>