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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
canvas知识总结
Jan 25 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 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
实用函数9
2007/11/08 PHP
PHP 数组实例说明
2008/08/18 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
python的re模块应用实例
2014/09/26 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
英国计算机商店:Technextday
2019/12/28 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
铲车司机岗位职责
2014/03/15 职场文书
股东合作协议书
2014/04/14 职场文书
财务内勤岗位职责
2014/04/17 职场文书
股指期货心得体会
2014/09/10 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
公司会议开幕词
2015/01/29 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2019入党申请书格式
2019/06/25 职场文书
python实现会员管理系统
2022/03/18 Python
MySQL分区以及建索引的方法总结
2022/04/13 MySQL