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 相关文章推荐
jquery 学习之一 对象访问
Nov 23 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
JS定时器实例
Apr 17 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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分页函数
2006/10/09 PHP
PHP+javascript液晶时钟
2006/10/09 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
python对数组进行反转的方法
2015/05/20 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
Python 的AES加密与解密实现
2019/07/09 Python
详解django中Template语言
2020/02/22 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
python/golang 删除链表中的元素
2020/09/14 Python
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
城市规划毕业生求职信
2013/10/10 职场文书
大学生专业个人学习的自我评价
2013/10/26 职场文书
银行授权委托书样本
2014/10/13 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
高中美术教学反思
2016/02/17 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python