Javascript 表单之间的数据传递代码


Posted in Javascript onDecember 04, 2008

一,最简单的就是同一个网页里的表单的数据传递。
举个实例,一个网页上有两个表单,每个表单里一个文本框,一个按钮。点按钮互相对操作对方的文本框的值。我们举的例子是把一个文本框付给另一个文本框。具体的HTML代码如下: 

<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
</head> 
<body> 
<form name="form1" method="post" action=""> 
<input type="text" name="textfield"> 
<input type="button" name="Submit" value="1--------->2" onClick="ok()"> 
</form> 
<form name="form2" method="post" action=""> 
<input type="text" name="textfield2"> 
<input type="button" name="Submit" value="2----->1" onClick="ok1()"> 
</form> 
</body> 
</html>

以上为HTMl的代码,大家可能注意到了onclik的代码了,有两个函数,接下来就是JAVASCRIPT的代码了:
<script language="JavaScript"> 
function ok() 
{ 
document.form2.textfield2.value=document.form1.textfield.value; 
} 
function ok1() 
{ 
document.form1.textfield.value=document.form2.textfield2.value; 
} 
</script>

二,第二种是两个窗口之间的表单的文本框之间数据传递。其实这个可以在原来的基础上进行一些扩展就可以了。关于如何创建弹出窗口,窗体里的表单的代码, 在这里就不多说了,现在在这里说一下如何操作父窗口的表单里的文本框的数据。具体代码如下:
<script language="JavaScript"> 
function ok() 
{ 
opener.document.form2.textfield2.value=document.form1.textfield.value 
} 
</script>

三,第三种就是框架网页之间的表单的文本框之间数据传递.
注意的地方是框架的写法:
<frameset cols="505,505"> 
<frame src="test.htm" name="leftr" id="leftr">//定义框架的名称 
<frame src="test2.htm" id="right" name="right"> 
</frameset> 
<noframes><body> 
</body></noframes>

具体的实现代码如下:
<script language="JavaScript"> 
function ok() 
{ 
parent.leftr.document.form2.textfield2.value 
=document.form1.textfield.value 
} 
</script>

这三种窗口之间的文本框数值互相操作的简单方法就实现了,其它需要注意的就是他们之间的关系。
Javascript 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
javascript Number 与 Math对象的介绍
Nov 17 Javascript
Javascript !!的作用
Dec 04 #Javascript
js 深拷贝函数
Dec 04 #Javascript
JavaScript 基础问答三
Dec 03 #Javascript
asp 取文本框名称代码
Dec 02 #Javascript
JavaScript获得选中文本内容的方法
Dec 02 #Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 #Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 #Javascript
You might like
计数器详细设计
2006/10/09 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
python 递归相关知识总结
2021/03/03 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
行政经理岗位职责
2013/11/09 职场文书
车队司机自我鉴定
2014/03/02 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
义卖募捐活动总结
2015/05/09 职场文书
工伤调解协议书
2016/03/21 职场文书