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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
Jquery之美中不足小结
Feb 16 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
javascript jQuery插件练习
2008/12/24 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
全面分析Python的优点和缺点
2018/02/07 Python
基于python中__add__函数的用法
2019/11/25 Python
如何理解Python中的变量
2020/06/01 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
介绍一下你对SOA的认识
2016/04/24 面试题
简历中个人求职的自我评价模板
2013/11/29 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
服务整改报告
2014/11/06 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
综合实践活动报告
2015/02/05 职场文书
世界遗产导游词
2015/02/13 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
Go语言测试库testify使用学习
2022/07/23 Golang
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL