表单处理
2016-11-02 本文已影响20人
味蕾里的青春
一、选择并转移导航菜单
1.html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-scale,initial-scale=1">
<title>Select and Go Navigation</title>
</head>
<body>
<div align="center">
<form action="gotoLocation.cgi">
<select id="newLocation">
<option selected="selected">请选择</option>
<option value="script01.html">我最爱吃的水果是苹果</option>
<option value="script02.html">我最爱吃的水果是香蕉</option>
<option value="script03.html">我最爱吃的水果是橙子</option>
<option value="script04.html">我最爱吃的水果是梨</option>
<option value="script05.html">我最爱吃的水果是柿子</option>
</select>
<noscript>
<input type="submit" value="Go There!">
</noscript>
</form>
</div>
<script type="text/javascript" src="../js/Select and Go Navigation.js"></script>
</body>
</html>
2.js代码：
window.onload=initForm;
function initForm() {
document.getElementById("newLocation").selectedIndex=0;
document.getElementById("newLocation").onchange=jumpPage;
}
function jumpPage() {
var newLoc= document.getElementById("newLocation");
var newPage=newLoc.options[newLoc.selectedIndex].value;
if (newPage!=""){
window.location=newPage;
}
}
3.output:
select
二、动态的改变菜单
1.html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-scale,initial-scale=1">
<title>Dynamic Menus</title>
</head>
<body>
<form action="#">
<select id="months">
<option value="">Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">Ocotober</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select id="days">
<option>Days</option>
</select>
</form>
<script type="text/javascript" src="../js/Dynamic Menus.js"></script>
</body>
</html>
2.js代码：
window.onload=initForm;
function initForm(){
document.getElementById("months").selectedindex=0;
document.getElementById("months").onchange=PopulateDays;
}
function PopulateDays(){
var monthDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var monthStr=this.options[this.selectedIndex].value;
if (monthStr!="") {
var theMonth=parseInt(monthStr);
document.getElementById("days").options.length=0;
for(var i=0;i<monthDays[theMonth];i++){
document.getElementById("days").options[i]=new Option(i+1);
}
}
}
3.output:
Paste_Image.png
三、建立必须填写的字段
1.html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-scale,initial-scale=1">
<link type="text/css" rel="stylesheet" href="../css/Password Check.css">
<title>Password Check</title>
</head>
<body>
<form action="#">
<p><label for="userName">Your Name:
<input type="text" size="30" id="useName" class="reqd" >
</label>
</p>
<p><lable for="password1">Choose a password:
<input type="password" id="password1" class="reqd">
</lable>
</p>
<p><lable for="password2">Verify password:
<input type="password" id="password2" class="reqd password1">
</lable>
</p>
<p><input type="submit" value="提交"> <input type="reset">
</form>
<script type="text/javascript" src="../js/Password Check.js"></script>
</body>
</html>
2.css代码：
body {
color: #000;
background-color: #fff;
}
input.invalid {
background-color: #ff9;
border: 2px red inset;
}
label.invalid {
color: #f00;
font-weight: bold;
}
3.js
window.onload=initForm;
function initForm() {
for(i=0;i<document.forms.length;i++){
document.forms[i].onsubmit=function(){
var submit=validForm();
console.log("submit",submit)
return submit
}
}
}
function validForm() {
var allGood=true;
var allTags=document.getElementsByTagName("input");
for (var i=0;i<allTags.length;i++){
// console.log("tag" + i,allTags[i])
if(validTag(!allTags[i])){
allGood=false;
}
}
return allGood;
function validTag(thisTag) {
var outClass="";
var allClasses=thisTag.className.split(" ");
console.log("allClasses",allClasses)
for (var j=0;j<allClasses.length;j++){
outClass +=validBasedOnClass(allClasses[j])+" ";
}
thisTag.className=outClass;
if (outClass.indexOf("valid")>-1){
thisTag.focus();
if (thisTag.nodeName="INPUT"){
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass){
var classBack="";
console.log("thisClass",thisClass,allGood,thisTag.value)
switch(thisClass){
case "":
case "invalid":
break;
case "reqd":
if(allGood && !thisTag.value){
console.log('thisClass1')
classBack="invalid ";
}
classBack+=thisClass;
break;
default:
classBack+=thisClass;
}
return classBack;
}
}
}
4.output:
Paste_Image.png
