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实现预览待上传的本地图片
Mar 15 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
js date 格式化
Feb 15 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
原生JS实现拖拽功能
Dec 16 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
Zend Guard使用指南及问题处理
2015/01/07 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
面包屑导航详解
2017/12/07 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
在Python的Django框架中包装视图函数
2015/07/20 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
大学毕业生的自我鉴定
2013/11/30 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
四年级学生期末评语
2014/12/26 职场文书
普宁寺导游词
2015/02/04 职场文书
朋友离别感言
2015/08/04 职场文书