JS中表单的使用小结


Posted in Javascript onJanuary 11, 2014

1.javascript刷新页面的方法
     
window.location.reload();

使用window.open()弹出的弹出窗口,刷新父窗口
    window.opener.location.reload()

使用window.showDialog弹出的模式窗口
    window.dialogArguments.location.reload();

2.javascript弹出窗口的两种实现方式 ---下面给两个弹出屏幕居中窗口的例子
window.open()方式

       function ShowDialog(url) { 
           var iWidth=300; //窗口宽度
           var iHeight=200;//窗口高度
           var iTop=(window.screen.height-iHeight)/2;
           var iLeft=(window.screen.width-iWidth)/2;
           window.open(url,"Detail","Scrollbars=no,Toolbar=no,Location=no,Direction=no,Resizeable=no,
     Width="+iWidth+" ,Height="+iHeight+",top="+iTop+",left="+iLeft); 
          }

window.showModalDialog方式
     function ShowDialog(url) { 
           var iWidth=300; //窗口宽度
           var iHeight=200;//窗口高度
           var iTop=(window.screen.height-iHeight)/2;
           var iLeft=(window.screen.width-iWidth)/2;
           window.showModalDialog(url,window,"dialogHeight: "+iHeight+"px; dialogWidth: "+iWidth+"px;
     dialogTop: "+iTop+"; dialogLeft: "+iLeft+"; resizable: no; status: no;scroll:no");
         }

注意这里的第二个参数,window

3.页面中设置不进行缓存数据的方法

在jsp页面加入如下语句 

<%
      response.setHeader("Pragma","No-Cache");
      response.setHeader("Cache-Control","No-Cache");
      response.setDateHeader("Expires", 0);
%>

4.无提示关闭页面的方法
function CloseWin(){ 
    var ua = navigator.userAgent; var ie = navigator.appName=="Microsoft Internet Explorer"?true:false; 
    if(ie){
 var IEversion = parseFloat(ua.substring(ua.indexOf("MSIE ")+5,ua.indexOf(";",ua.indexOf("MSIE ")))); 
    if( IEversion< 5.5){
    var str = '';
    document.body.insertAdjacentHTML("beforeEnd", str);
     document.all.noTipClose.Click(); 
   } else {
      window.opener =null; window.close();
   }
  }else{ 
  window.close() 
  }
}

5、定时关闭弹出的窗口---设置/清除定时器
scriptlanguage="JavaScript" 
!-- 
functioncloseit(){ 
setTimeout("self.close()",100000)//单位是毫秒,这里是100秒 
setInterval("self.close()",100000)
window.clearTimeout(me.timer); 
window.clearInterval(me.timer); 
/script

6.javascript弹出子窗口中传值---通过url传值
<script language="javascript" type="text/javascript">
function fn_modify(pid){
    var ModifyInfo=new Object();
 window.showModalDialog("modify_main.asp?pid="+pid,ModifyInfo,"dialogHeight:180px;dialogWidth:300px;dialogLeft:;dialogTop:;resizable:off;center:on;help:off;scroll:off;status:off")
 Reload();
}
function Reload(){location.href="abc.asp";}
</SCRIPT> 
<a href="abc.asp" onClick="fn_modify('这是值')">单击</a>

7.js隐藏/显示表单
document.all("id").style.display=="none";//隐藏
document.all("id").style.display=="";//显示
document.getElementById("bt").style.display=="none"
document.getElementById("bt").style.display==""
id为table,input 的id

8.js控制表单元素有效/失效
document.getElementById("bt").disabled=true;
document.all("Submit1").disabled=true;//失效
document.all("Submit1").disabled=false;//有效

设置/获取元素的值
document.getElementById("labTitle").innerHTML="IP模式";//设置值
document.getElementById("labTitle").innerHTML//获取值
labTitle 为div,span,table的id

实例1:

<input id="mytext" type="text" value="我是不能用的">
<input type="button" value="disabled" onClick="javascript: document.all.mytext.disabled='false'">
<input type="button" value="enable" onClick="javascript: document.all.mytext.removeAttribute('disabled')">

实例2:

<input id="mytext" type="text" value="我是能用的">
<input type="button" value="disable" onClick="if (mytext.disabled==false){ mytext.disabled=true;mytext.value='我是不能用的';this.value='enable'} else { mytext.disabled=false;mytext.value='我是能用的';this.value='disable'}">

9.页面通过函数提交表单的方法

function exit(){
selcardForm.action="/NDHotel/queryTroom.do?method=exitSystem";
selcardForm.submit();
}

10.遍历radio方法
<input id="mode1" type="radio"    name="workMode" value="1" checked>
var radios=document.getElementsByName("workMode");
 var workMode="";
     for(var i=0;i<radios.length;i++){
         if(radios[i].checked==true){
          workMode=radios[i].value;
         }
     }

11.向select中动态添加option
<select id="ddlProvince" name="ddlProvince" onchange="cityResult()">
var prov=document.getElementById("ddlProvince");
        prov.options.add(new Option("---请选择---",""));
    var pArray=zoneIdProvince.split("&");
    for(var i=0;i<pArray.length;i++){
      var idpArray=pArray[i].split("#");
      var sZoneID=idpArray[0];
      var sProvince=idpArray[1];
      prov.options.add(new Option(sProvince,sZoneID));
    }

12.页面中使用prototype ajax提交数据的实现方式(java)

一步:在<head></head>中添加以下js文件链接

<head>
<script language="JavaScript" src="/NDHotel/js/prototype-1.6.js"></script>
</head>

二步:把prototype-1.6.js文件放到/NDHotel/js/指定的目录中

三步:在<script type="text/javascript"></script>中声明以下调用函数

<script type="text/javascript">
function editIpSegment(){
 var url='/NDHotel/ipsegmentset.do?method=roomChangeNotice';
 var pars = 'startip='+startip+'&endip='+endip+'&lindex='+lindex;new Ajax.Request( url, {method: 'get', parameters: pars, asynchronous:false,onComplete:editResult});
}

function editResult(result){
    var returnStr = result.responseText;
    if(returnStr =='fail'){
      alert("");
      return false;  
    }
}
</script>

四步:实现后台调用
 public ActionForward roomChangeNotice(ActionMapping mapping,
   ActionForm form, HttpServletRequest request,
   HttpServletResponse response) throws Exception {
  String result = "";
  PrintWriter pw = RainPrintWriter.getPrintWriter(response);
  try {
   NotifyServiceTwo.sendMessage(4, 0);
   result = "success";
  } catch (Exception e) {
   logger.error("roomChangeNotice" + e);
  }
  pw.write(result);
  pw.close();
  return null;
 }

13.js中获取表单的值的方式:
document.getElementById("lindex").value
document.all.lindex.value//lindex在页面中必须是唯一的
//设置获取焦点
document.getElementById("lindex").focus()
document.all.startip.focus()
//设置失去焦点
document.getElementById("lindex").blur()
document.all.startip.blur()

14.动态添加/删除表格中的行
<table width="100%"  id="tdSearch" name="tdSearch" cellpadding="0" cellspacing="0" align="center">
</table>
//动态生成table的行
var autoId = 0; // 自增变量  
function addRow(value1,value2){       
 var highQuery=document.getElementById("tdSearch"); 
 highQuery.insertRow();
 var newRow = highQuery.rows[highQuery.rows.length - 1];  
 newRow.id = "row_" + autoId; 
 newRow.insertCell(); 
 newRow.cells[0].innerHTML = "<input width='200' value='"+value1+"' onchange='changeip("+autoId+")' type='text' id='bIPFrom_"+autoId+"'>-";
 newRow.insertCell(); 
 newRow.cells[1].innerHTML = "<input width='200' value='"+value2+"' type='text' id='bIPTo_"+autoId+"'> ";      
   var cell2 = newRow.insertCell(); 
 cell2.innerHTML = "<input  class='btn_1word' type='button' class='HQ_BUTTON' value='-' onClick=removeRow('" + newRow.id + "')>";
       cell2.setAttribute("class", "yellowCell2"); 
 autoId=autoId+1;
}
function removeRow(rowId){
 var trRow = document.getElementById(rowId);
  //alert(trRow);
 //if(rowId!="row_0"){
  trRow.removeNode(true);
 //}
}

15. 集合
//显示导入进度条
document.all("btnImport").disabled=true;
document.all("DataGrid_WaitDiv").style.left=100;
document.all("DataGrid_WaitDiv").style.top=295;
document.all("DataGrid_WaitDiv").style.display = "";
form1.action="/NDHotel/jsp/systemset/roomSet/uploadFile.jsp";
form1.submit();
16.新建一个窗口
function layer1AddGroup() {
var url='/NDHotel/jsp/systemset/roomSet/addGroup.jsp';
var newwin=window.showModalDialog(url,window,"dialogWidth=470px;dialogHeight=400px;scroll=yes;status=no;help=no;");
}
//刷新父页面
function roomMainLeftRightFrame(){
var layer='<%=layer%>';
window.parent.parent.frames('view').location.href="/NDHotel/troom.do?method=roomSetLeftMenu&layer="+layer; 
}

17.设置文本框只读属性/设置文本框的颜色/设置radio选中
document.all("txt_AutoTime").readOnly=true;
document.all("txt_AutoTime").style.backgroundColor="#d0d0d0";
runParamSetForm.radNotForcibly.checked=true;

//IP地址验证
function ipCheck(ipValue){
 var reg = /^/d{1,3}(/./d{1,3}){3}$/;
 if(ipValue != ""){
  if (reg.test(ipValue)){
   var ary = ipValue.split('.');
   for(key in ary){
    if (parseInt(ary[key]) > 255 )
     return false;
   }
   return true;
  }else
 return false; 
 }else
 return true; 
}
Javascript 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
jQuery 全选效果实现代码
Mar 23 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
js opener的使用详解
Jan 11 #Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 #Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 #Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 #Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 #Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 #Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 #Javascript
You might like
php验证码生成器
2017/05/24 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
怎样使用Python脚本日志功能
2016/08/14 Python
使用Python实现简单的服务器功能
2017/08/25 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Python检测数据类型的方法总结
2019/05/20 Python
Python远程linux执行命令实现
2020/11/11 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
数字化校园建设方案
2014/05/03 职场文书
学校推普周活动总结
2015/05/07 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
python简单验证码识别的实现过程
2021/06/20 Python