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 相关文章推荐
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
小程序实现tab标签页
Nov 16 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中的Memcache详解
2014/04/05 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
JS实现简易日历效果
2021/01/25 Javascript
Python入门篇之正则表达式
2014/10/20 Python
Python合并字符串的3种方法
2015/05/21 Python
python入门教程 python入门神图一张
2018/03/05 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
Django分组聚合查询实例分享
2020/04/29 Python
高级运动鞋:GREATS
2019/07/19 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
建筑个人求职信范文
2014/01/25 职场文书
小学生环保演讲稿
2014/04/25 职场文书
销售代理协议书
2014/09/30 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
学校捐书倡议书
2015/04/27 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
汽车销售合同文本
2019/08/08 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL