JavaScript实现同一页面内两个表单互相传值的方法


Posted in Javascript onAugust 12, 2015

本文实例讲述了JavaScript实现同一页面内两个表单互相传值的方法。分享给大家供大家参考。具体如下:

有时候我们在提交表单的时候需要将两个表单的值互相传递,那么如何实现呢?其实很简单,就是用JavaScrip获取任一表单的值,然后赋给另一个,具体可看代码,代码很有意思,也很实用。

运行效果截图如下:

JavaScript实现同一页面内两个表单互相传值的方法

具体代码如下:

<html>
<head>
<title>JavaScript同一页面两个表单互相传值</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<script language="JavaScript">
function ok()
{
 document.form2.textfield2.value=document.form1.textfield.value;
}
function ok1()
{
document.form1.textfield.value=document.form2.textfield2.value;
}
</script>
<body>
<form name="form1" method="post" action="">
 <input type="text" name="textfield">
 <input type="button" name="Submit" value="A表单->传值给B表单" onClick="ok()">
</form>
<form name="form2" method="post" action="">
 <input type="text" name="textfield2">
 <input type="button" name="Submit" value="B表单->传值给A表单" onClick="ok1()">
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 #Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 #Javascript
JavaScript入门基础
Aug 12 #Javascript
js实现将选中值累加到文本框的方法
Aug 12 #Javascript
javascript实现简单的分页特效
Aug 12 #Javascript
JavaScript实现网站访问次数统计代码
Aug 12 #Javascript
jquery+ajax请求且带返回值的代码
Aug 12 #Javascript
You might like
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
Display SQL Server Version Information
2007/06/21 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python实现Dijkstra算法
2018/10/17 Python
python获取Linux发行版名称
2019/08/30 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
python文件路径操作方法总结
2020/12/21 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
师范应届生求职信
2013/11/15 职场文书
搞笑获奖感言
2014/01/30 职场文书
继承公证书
2014/04/09 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
Vue深入理解插槽slot的使用
2022/08/05 Vue.js