<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js操作form表单</title>
</head>
<body>
<form action="" method="post" οnsubmit="return ss()">
用户名:<input type="text" id="username" /><br />
密码:<input type="password" id="pwd" /><br />
性别:<input type="radio" name="sex" id="1"/>男
<input type="radio" name="sex" id="0"/>女<br />
爱好:<input type="checkbox" name="hobby" id="1"/>篮球
<input type="checkbox" name="hobby" id="2"/>足球
<input type="checkbox" name="hobby" id="3"/>排球
<input type="checkbox" name="hobby" id="4"/>羽毛球<br />
<select id="sel">
<option value="1">人事</option>
<option value="2">IT</option>
<option value="3">后勤</option><br />
</select><br />
<button>提交</button>
</form>
<button οnclick="show()">回显数据</button>
<script>
function ss(){
//获取表单的值
var username=document.getElementById("username").value;
var pwd=document.getElementById("pwd").value;
var sexs=document.getElementsByName("sex");
for (var i=0;i<sexs.length;i++) {
if(sexs[i].checked){
sex=sexs[i].id;
}}
var hobby=""
var hobbys=document.getElementsByName("hobby");
for (var j=0;j<hobbys.length;j++) {
if(hobbys[j].checked){
hobby+=hobbys[j].id;
}
}
var sel=document.getElementById("sel").value;
//checked 属性规定在页面加载时应该被预先选定的 input 元素。
//checked 属性适用于 <input type="checkbox"> 或 <input type="radio">。
//如果使用该属性,则会预先选定该 input 元素。
//checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。
alert(username+"======="+pwd+"=="+sex+"===="+hobby+"=="+sel)
return false;
}
</script>
</form>
</body>
<html>
<head>
<meta charset="UTF-8">
<title>js操作form表单</title>
</head>
<body>
<form action="" method="post" οnsubmit="return ss()">
用户名:<input type="text" id="username" /><br />
密码:<input type="password" id="pwd" /><br />
性别:<input type="radio" name="sex" id="1"/>男
<input type="radio" name="sex" id="0"/>女<br />
爱好:<input type="checkbox" name="hobby" id="1"/>篮球
<input type="checkbox" name="hobby" id="2"/>足球
<input type="checkbox" name="hobby" id="3"/>排球
<input type="checkbox" name="hobby" id="4"/>羽毛球<br />
<select id="sel">
<option value="1">人事</option>
<option value="2">IT</option>
<option value="3">后勤</option><br />
</select><br />
<button>提交</button>
</form>
<button οnclick="show()">回显数据</button>
<script>
function ss(){
//获取表单的值
var username=document.getElementById("username").value;
var pwd=document.getElementById("pwd").value;
var sexs=document.getElementsByName("sex");
for (var i=0;i<sexs.length;i++) {
if(sexs[i].checked){
sex=sexs[i].id;
}}
var hobby=""
var hobbys=document.getElementsByName("hobby");
for (var j=0;j<hobbys.length;j++) {
if(hobbys[j].checked){
hobby+=hobbys[j].id;
}
}
var sel=document.getElementById("sel").value;
//checked 属性规定在页面加载时应该被预先选定的 input 元素。
//checked 属性适用于 <input type="checkbox"> 或 <input type="radio">。
//如果使用该属性,则会预先选定该 input 元素。
//checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。
alert(username+"======="+pwd+"=="+sex+"===="+hobby+"=="+sel)
return false;
}
</script>
</form>
</body>
</html>
注意:通过调用getElementsByName或者getElementsByID过程中()内的元素必须加上双引号;
form表单中常用的html对象input text,password,radio,checkbox,submit;
获取单选值多选值for .if循环的逻辑问题。