关闭

js+html实现表单

342人阅读 评论(0) 收藏 举报
    <html>
     <head>
      <title>教学质量投票系统</title>
     <script type="text/javascript"> 
    <!--
    //表单
      //用户名
     function match(){
      var exp= /^[\u4e00-\u9fa5]{2,4}$/;
      var mm = document.getElementById("ren").value;
      aa(mm);
      function aa(people){
      var result = people.match(exp);
      if(!result){
       alert("投票人错误");
       }
      }
     //编号
      var exp = /^\w+$/;
      var ren = document.getElementById("renno").value;
      kk(ren);
      function kk(peopleno){
       var result = peopleno.match(exp);
      if(!result){
       alert("投票人编号错误");
       }
      }
     //日期
      var exp = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
      var hiredate = document.getElementById("hiredate").value;
      ww(hiredate);
      function ww(hired){
       var result = hired.match(exp);
      if(!result){
       alert("投票人日期输入错误");
       } 
       }
      }
    //楼,房间
    var rooms = new Array(4);
    rooms["A1"] = ["A1001", "A1002", "A1003", "A1004", "A1005"];
    rooms["A2"] = ["A2001", "A2002", "A2003", "A2004", "A2005"];
    rooms["A3"] = ["A3001", "A3002", "A3003", "A3004", "A3005"];
    rooms["A4"] = ["A4001", "A4002", "A4003", "A4004", "A4005"];
    function removeOptions(optionMenu)
    {
     for (var i=0; i < optionMenu.options.length; i++) 
      optionMenu.options[i] = null; 
    }
    function addOptions(optionList,optionMenu)
    {
     removeOptions(optionMenu);  // clear out the options
     for (var i=0; i < optionList.length; i++)
      optionMenu.options[i] = new Option(optionList[i], optionList[i]);
    }
    
    //隐藏与显示问题
    
    function doClick(){
     
    var jsomObj = {"wtsm":"你对本次教学安排是否满意","wtlx":"radio","xxnr":{"a1":"满意","a2":"不满意"},"xxgs":2};
    var jsonObj ={"wtsm":"你都了解了哪些内容","wtlx":"checkbox","xxnr":{"a1":"DOM","a2":"BOM","a3":"AJAX"},"xxgs":3};
    var jsonobj = {"wtsm":"你的感想","wtlx":"textarea","cols":50 ,"rows":5};

    var q=document.getElementById("answer1")
    q.innerHTML="<p>"+ jsomObj.wtsm+"</p>"+"<input type="+jsomObj.wtlx+" "+"name="+jsomObj.xxgs+">"+jsomObj.xxnr.a1+"<input type="+jsomObj.wtlx+" "+"name="+jsomObj.xxgs+">"+jsomObj.xxnr.a2+"<br>";
    q.innerHTML=q.innerHTML+"<p>"+ jsonObj.wtsm+"</p>"+"<input type="+jsonObj.wtlx+" "+"name="+jsonObj.xxgs+">"+jsonObj.xxnr.a1+"<input type="+jsonObj.wtlx+" "+"name="+jsomObj.xxgs+">"+jsonObj.xxnr.a2+"<input type="+jsonObj.wtlx+" "+"name="+jsomObj.xxgs+">"+jsonObj.xxnr.a3+"<br>";
    q.innerHTML=q.innerHTML+"<p>"+ jsonobj.wtsm+"</p>"+"<"+jsonobj.wtlx+" "+"cols="+jsonobj.cols+" "+"rows="+jsonobj.rows+">";
      
       if(document.getElementById('answer1').style.display == 'none'){
            document.getElementById('answer1').style.display = '';
            document.testform.button.value ="隐藏问题";
          }else{
           document.getElementById('answer1').style.display = 'none';
            document.testform.button.value ="显示问题";
          }
    }      
    -->
     
    </script>
    
     </head>
     <body>
      <center>
      <form name="testform" id="testform" action="#" method="get">
       <table align="center" width="40%" border="1px"  bordercolor="yellow" bgcolor="blur" style="BORDER-COLLAPSE: collapse">
        <tr><td width="50%">投票人*</td><td width="50%"><input type="text" id="ren" name="ren" value=""/></td></tr>
        <tr><td width="50%">投票人编号*</td><td width="50%"><input type="text" id="renno" name="renno" value=""/></td></tr>
        <tr><td width="50%">日期*</td><td width="50%"><input type="text" id="hiredate" name="hiredate" value=""/></td></tr>
        <tr><td width="50%">投票地点*</td>
         <td width="50%">
          <select>
           <option  selected="selected">中国</option>
           <option>日本</option>
          </select>
         </td>
        </tr>
        <tr>
         <td width="50%">性别</td>
         <td><input type="radio" name="sex" value="boy" checked="checked"/>男
           <input type="radio" name="sex" value="girl"/>女</td>
        </tr>
        <tr>
         <td width="50%">所在楼*</td>
         <td>
          <select  name="country" id="country" onchange="addOptions(rooms[this.options[this.selectedIndex].text],document.testform.room);">
           <option>A1</option>
           <option>A2</option>
           <option>A3</option>
           <option>A4</option>
          </select>
         </td>
        </tr>
       <tr>
         <td width="50%">所在房间*</td>
         <td width="50%">
          <select name="room" id="room">
           <option>A1001</option>
           <option>A1002</option>
           <option>A1003</option>
           <option>A1004</option>
           <option>A1005</option>
          </select>
         </td>
        </tr>
        <tr>
         <td colspan="2" id="answer" onclick="doClick()">
          <input type="button" name="button" value="显示问题">
          </td>
        </tr>
        <tr> 
         <td colspan="2" id = "answer1" style="display:none;">
          <table width="100%" border="1">
             </table>
           </td>
         </tr>

        <tr>
         <td colspan="2">
          <center><input type="button" name="tijiao" value="提交" onclick="match()" /></center>
         </td>
        </tr>
       </form>
      </table>
     </center>
     </body>
    </html>


 

0
0

猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:132720次
    • 积分:879
    • 等级:
    • 排名:千里之外
    • 原创:24篇
    • 转载:2篇
    • 译文:0篇
    • 评论:4条
    文章分类
    文章存档
    最新评论