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实战之品牌展示列表效果
Apr 10 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
JavaScript文档对象模型DOM
Nov 20 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
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 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
简单的php购物车代码
2020/06/05 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
layui实现文件或图片上传记录
2018/08/28 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
python中的列表推导浅析
2014/04/26 Python
python利用beautifulSoup实现爬虫
2014/09/29 Python
Python Queue模块详解
2014/11/30 Python
Python交互式图形编程的实现
2019/07/25 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
pygame实现弹球游戏
2020/04/14 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
如何用Python徒手写线性回归
2021/01/25 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
应届生会计求职信
2013/11/11 职场文书
服装创业计划书范文
2014/02/05 职场文书
美术指导助理求职信
2014/04/20 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
个人德育工作总结
2015/03/05 职场文书
活动新闻稿范文
2015/07/17 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript