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 相关文章推荐
jquery 插件学习(五)
Aug 06 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
Antd下拉选择,自动匹配功能的实现
Oct 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 URL跳转代码 减少外链
2011/06/25 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
实例解析php的数据类型
2018/10/24 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
JS实现小星星特效
2019/12/24 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
python的id()函数解密过程
2012/12/25 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
python实现简易数码时钟
2021/02/19 Python
Python PO设计模式的具体使用
2019/08/16 Python
python判断是空的实例分享
2020/07/06 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
项目建议书模板
2014/05/12 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
学生党员检讨书范文
2014/12/27 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js