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 相关文章推荐
理解Javascript_08_函数对象
Oct 15 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
JavaScript中string对象
Jun 12 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
Vue中的字符串模板的使用
May 17 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 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
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
javascript 打印页面代码
2009/03/24 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
项目合作计划书
2014/01/09 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
销售类求职信
2014/06/13 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
速龙x4-860k处理器相当于i几
2022/04/20 数码科技
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python