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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
js实现简单抽奖功能
Nov 24 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
discuz安全提问算法
2007/06/06 PHP
php的正则处理函数总结分析
2008/06/20 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
培养自己的php编码规范
2015/09/28 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
Django如何配置mysql数据库
2018/05/04 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
教师应聘个人求职信
2013/12/10 职场文书
领导班子对照检查材料
2014/09/22 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
工作后的感想
2015/08/07 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android