表单处理

一、选择并转移导航菜单
1.html代码：



    
        
        
        Select and Go Navigation

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代码：



    
        
        
        Dynamic Menus

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

 
 3.output: 
  
   
    
     
    
   
  
    Paste_Image.png 
   
  
 三、建立必须填写的字段
 1.html代码： 
 


    
        
        
        
        Password Check
    
    
       
           Your Name:
                   
               
           
           Choose a password:
                   
               
           
           Verify password:
                   
               
           
            
       
       

    

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

表单处理

你可能感兴趣的:(表单处理)