JavaScript实现页面传值

最新推荐文章于 2020-11-21 16:10:45 发布
最新推荐文章于 2020-11-21 16:10:45 发布
阅读量353 收藏
点赞数
分类专栏： JavaScript相关应用 文章标签： javascript function button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niyunzhiying/article/details/5628338
版权

我还是菜鸟，请大家多指教！

页面一：

<html>
 <head>
  <title> 页面传值一 </title>
  <script>
    function funShow()
 {
    var arr=new Array(6);
       var arrs = showModalDialog("页面传值二.html");
       for(i=0;i<6;i++)
    {
         arr[i]=arrs.substr(0,arrs.indexOf(","));
   arrs=arrs.substr(arrs.indexOf(",")+1,arrs.length);
    }
    document.getElementById("f1").innerHTML=arr[0];
    document.getElementById("f2").innerHTML=arr[1];
    document.getElementById("f3").innerHTML=arr[2];
    document.getElementById("f4").innerHTML=arr[3];
    document.getElementById("f5").innerHTML=arr[4];
    document.getElementById("f6").innerHTML=arr[5];
 }
  </script>
 </head>
 <body>
    &nbsp;&nbsp;&nbsp;<a href="javascript:funShow()">填表</a><br/><br/>
    &nbsp;&nbsp;&nbsp;Id:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font id="f1"></font><br/>
 &nbsp;&nbsp;&nbsp;Name:&nbsp;&nbsp;&nbsp;<font id="f2"></font><br/>
 &nbsp;&nbsp;&nbsp;Class:&nbsp;&nbsp;<font id="f3"></font><br/>
 &nbsp;&nbsp;&nbsp;Like1:&nbsp;&nbsp;<font id="f4"></font><br/>
    &nbsp;&nbsp;&nbsp;Like2:&nbsp;&nbsp;<font id="f5"></font><br/>
 &nbsp;&nbsp;&nbsp;Like3:&nbsp;&nbsp;<font id="f6"></font><br/>
 </body>
</html>
页面二：

<html>
 <head>
  <title> 页面传值二 </title>
  <script>
    function funTxtId()    //对Id进行验证的方法
 {
       var txtid = document.getElementById("txtId").value;
    if(txtid.length == 0)
    {
          document.getElementById("ftxtId").innerHTML="*";
    }else
    if(txtid.substr(txtid.length-2,txtid.length+1)!="ab")
    {
          document.getElementById("ftxtId").innerHTML="后两位必需是ab";
    }else
    if(txtid.length!=6)
    {
          document.getElementById("ftxtId").innerHTML="Id必需是六位";
    }
    else
    {
          document.getElementById("ftxtId").innerHTML="";
    }
    return txtid+",";
 }

 function funtxtName()  //对Name 进行验证的方法
 {
       var namel = document.getElementById("txtName").value;
    if(namel.length != 0)
    {
      if(namel.length>16)
      {
            document.getElementById("fName").innerHTML="Name的长度不能超过16位";
      }
   else
   {
           return namel+",";
   }
    }
    else
    {
          document.getElementById("fName").innerHTML="*";
    }
 }

    function funClass()   //获得班级的方法
 {
   var cla = document.getElementById("classId").value;
   return cla+",";
 }

 function funValue()  //选择复选框的方法
 {
       var j=0;   //这是一个记数器，用于记录复选框是否选择了三项
       var s = document.getElementsByName("cId");
    var str="";
    for(i=0;i<s.length;i++)
    {
         if(s[i].checked)
   {
           str += s[i].value+",";
     j++;
   }
    }
    if(j!=3)
    {
          document.getElementById("fl").innerHTML="只能选择其中三项";
    }else
    {
          document.getElementById("fl").innerHTML="";
    }
    document.getElementById("textarea").value=str;
    return str;
 }
   
 function funstr()
 {
    var idv=funTxtId();
    var namel=funtxtName();
    var cls=funClass();
    var lik=funValue();
       var arrss=idv+namel+cls+lik;
    //document.getElementById("textarea").value=arrss;
    returnValue = arrss;   
    close();
 }
  </script>
 </head>
 <body>
 <form name="form1"><br/><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;Id:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="txtId" onBlur="funTxtId()"><font id="ftxtId" color="red"></font><br/><br/>
 &nbsp;&nbsp;&nbsp;&nbsp;Name:&nbsp;&nbsp;<input type="text" id="txtName" onBlur="funtxtName()"><font id="fName" color="red"></font><br/><br/>
 &nbsp;&nbsp;&nbsp;&nbsp;Class:&nbsp;<select id="classId" οnchange="funClass()"><option value="A100">A100</option><option   value="A200">A200</option><option value="A300">A300</option></select><br/><br/>
 &nbsp;&nbsp;&nbsp;&nbsp;Like:<font id="fl" color="red"></font><br/><br/>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="cId" οnclick="funValue()" value="唱歌">唱歌

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="cId" οnclick="funValue()" value="交友">交友

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="cId" οnclick="funValue()" value="看电影">看电影<br/><br/>

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox"  name="cId" οnclick="funValue()" value="看书">看书

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="cId" οnclick="funValue()" value="武术">武术<br/><br/>

    &nbsp;&nbsp;&nbsp;&nbsp;<textarea id="textarea" cols="28" rows="7"></textarea><br/><br/><br/>
 <a href="javascript:form1.funstr()"> 提交 </a>&nbsp;&nbsp;&nbsp;&nbsp;

 <input type="button" value="提交" οnclick="funstr()">
 </form>
 </body>
</html>

逆云之鹰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 两个页面之间传值
10-17
javascript 两个页面之间传值 使用window.open（）
javascript 实现页面间传递参数（页面传值）
abrahu的专栏
07-09 1172
我们用具体的例子来实现这个功能。 a.htmlfunction aa(){    window.location=("b.html?t=hello");}b.htmlfunction mygetstr(){    var myhref,pos,showtext;    myhref=window.locat
javascript 实现页面间传值（2）
kaleid_liner的博客
10-11 313
在上一篇文章中我们使用 escape() 向地址栏添加数据，其实在新版本，这个方法已经被弃用了，而且我们也没有必要用这个方法来传递数据。这里介绍一个最简单的通过标签传递数据，并使用 javascript 来获取数据的方法： 首先还是创建两个 html 文件，一个 post.html ，另一个 read.html  post.html ： 传值 read.ht
javascript静态页面传值的三种方法分享
10-26
介绍了javascript静态页面传值的三种方法及优缺点，有需要的朋友可以参考一下
使用javascript做页面间传值
jelink的专栏
09-29 6494
大家都知道，Asp.Net中页面传值主要可以用Session、Application、Post、Get传值。但是也可以通过javascript脚本实现页面传值。因为大家经常在网页上看到，比如叫你选择日期啊，负责人等，它们有时候就是一个图标，然后，你可以点击这个图标，弹出一个小页面，然后你就可以在这个小页面里进行选择了。当然，这也可以用下拉列表等做的，今天，我给大家介绍一个使用javascript做
JavaScript实现在页面间传值的方法
10-24
总结来说，本文档详细介绍了几种基于JavaScript在页面间传递参数的实现方法，适用于那些希望减少服务器交互而采用前端技术来增强用户体验的场景。这些方法包括通过URL重定向传递参数、使用隐藏表单字段传递参数以及...
javascript不同页面传值的改进版
10-30
在JavaScript中，不同页面间传递数据通常涉及到URL参数、本地存储（如localStorage或sessionStorage）或者利用cookie等技术。在这个特定的场景中，我们讨论的是一个改进的JavaScript方法，它允许在同一个页面上的多...
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
10-29
在WEB开发过程中，页面跳转是一...综上所述，通过JavaScript实现页面跳转和页面间传值，可以提供更为丰富的用户交互体验和页面动态功能。通过了解和掌握这些技术，开发者可以更加灵活地控制网页的行为和数据传递方式。
通过js给html元素赋值
07-19
通过js给html元素赋值，多个赋值方法，欢迎下载！
js 中 $(body).data('num', 1); $(body).data('num');
qq_34169240的博客
12-07 1661
$(body).data('num', 1);// 给body存放一个名字叫num的变量，值为1 $(body).data('num');// 取出body里面的num变量 简单来理解，你可以把它当成一个存放在控件里的全局变量，调用data方法来取值赋值，   第一个字符串是变量名，可以自定义，  第二个如果不传就是取值，传进去就是赋值。
使用JS给value属性赋值的实例
热门推荐
Bill好想
07-29 2万+
使用JS给value属性赋值的实例 by Bill好想 function show1(val){ document.myform.result.value = val ; } //方法1：这里val代表HTML DOM Select对象 function show2(val){ document.myform.result.value = val.value ;
js中获取当前页面高度，iframe高度赋值问题，body高度初始化赋值
jxzhangfan的博客
08-14 2920
document.body.clientHeight 获取当前页面高度 hight = document.body.clientHeight - 50; //具体div赋值 document.getElementById("scrollDiv").style.height=hight; ocument.getElementById("iframe").height=hight;
JavaScript页面之间的三种传值方式
weixin_44631286的博客
11-21 2212
1.页面之间的传递 采用赋值的方式完成页面之间文本框的传值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function page_value(){ var text1=document.getElementById("text_1");
JavaScript 父子窗口传值：showModalDialog与Firefox window.open 实例
`showModalDialog` 是一个在 JavaScript 中用来打开模态对话框的函数，它会阻止用户与当前页面进行交互，直到对话框关闭。这个方法的基本语法如下： ```javascript var returnValue = window.showModalDialog(url, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值