js实现两个页面表单传值并接收

网页制作时,需要两个页面之间传值,通过JS就可轻松实现。

js 实现两个页面表单传值并接收源码

A页面:

<input type="text" id="txt">
<input type="button" value="测试" onclick="test()"/>
<SCRIPT LANGUAGE="JavaScript">
function
 test(){       
 var s =document.getElementById("txt");
 location.href="2.html?"+"txt="+encodeURI(s.value);
 }
</SCRIPT>

第一个页面表单中输入文字或其他值。

B页面代码:

<form id="form1" name="form1" method="post" action="">
  <label for="textfield"></label>
  <input type="text" name="value1" id="value1" />
</form>
<script language="javascript" type="text/javascript">
var loc=location.href;
var n1=loc.length;//地址的总长度
var n2=loc.indexOf("=");//取得=号的位置
var id=decodeURI(loc.substr(n2+1, n1-n2));//从=号后面的内容
//alert(id);
document.write(id)
document.getElementById("value1").value=id;
</script>

B页面获取传过来的值并显示,也可把传过来的值显示到文本框中。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3602.html

(2)
江山如画的头像江山如画管理团队
上一篇 2019年7月9日 上午10:21
下一篇 2019年7月17日 上午9:23

99%的人还看了以下文章

  • css布局基础:定位综合练习

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 整体效果图: 效果说明: 1、随着网页向下滚动,当导航到达窗口顶端(t…

    2020年4月4日
    8.3K0
  • 纯CSS3制作的垂直手风琴效果,点击标题展开详细介绍

    纯CSS3制作的垂直手风琴效果 CSS代码: @import url(“css/font-awesome.css”); * { margin: 0; padding: 0; } *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; font: 16px/1 ‘O…

    2018年12月26日
    8.7K0
  • HTML5画布(Canvas)速查表

    HTML5 <canvas> 标签用于绘制图像。<canvas> 元素本身仅仅是图形的容器,必须使用脚本来完成实际的绘图任务。HTML5 <canvas> 可用于在画布上绘制文本、线条、矩形、圆形等等。 HTML5画布(Canvas)元素 <canvas id=”myCanvas” width=”500″ heigh…

    2018年2月20日
    8.8K0
  • css布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    12.5K0
  • CSS实现段落首字下沉效果的2种方法

    CSS实现段落首字下沉效果方法一 在CSS布局中,通过设置首字的大小并向左浮动,从而使得首字与其他字符区别;通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…

    2019年4月2日
    14.9K0
  • 纯CSS实现表格的自适应布局

    本文分享了一种用纯CSS实现的表格自适应布局,主要用到伪元素:before。

    2018年2月19日
    10.2K0

发表回复

登录后才能评论