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 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
Vue实现点击当前行变色
Dec 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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
IE下js调试工具Companion.JS
2010/10/15 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
Python字典对象实现原理详解
2019/07/01 Python
kali中python版本的切换方法
2019/07/11 Python
Python如何使用字符打印照片
2020/01/03 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
项目经理的岗位职责
2013/11/23 职场文书
个人自荐书
2013/12/20 职场文书
公民授权委托书
2014/10/15 职场文书
经典导游欢迎词
2015/01/26 职场文书
南湾猴岛导游词
2015/02/09 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server