关键词:
javascript
这是我第一次发的文章,仅作测试用,刚刚才玩BLOG,所以很多东东不会。故在CSDN摘了以下人兄的文章。得罪之处,多多见谅。
---------------------------------------------
javascript表单之间的数据传递! 选择自 itfly 的 Blog
今天有朋友问我关于用JAVASCRIPT来进行页面各表单之间的数据传递的问题,我以前也写过,不过从来没有注意,今天总结了一下,希望能够给大家一些帮助,也帮助我总结以前学过,用过的知识。
一,最简单的就是同一个网页里的表单的数据传递。
举个实例,一个网页上有两个表单,每个表单里一个文本框,一个按钮。点按钮互相对操作对方的文本框的值。我们举的例子是把一个文本框付给另一个文本框。具体的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与HTML结合进行数据传递** - **表单元素的选择与操作** - **事件处理函数的应用** - **不同窗口或框架间的通信** #### 知识点详解 ##### ...
本文将深入探讨如何利用JavaScript实现页面表单数据的高效传递,包括同一页面内的表单数据传递、不同窗口间的表单数据交换以及框架网页中的表单数据同步,以期为前端开发者提供实用的解决方案。 #### 同一页面内的...
例如,如果要将某个框架(leftr)中的表单数据传递到另外一个框架(right)中,可以通过parent.leftr.document.form2.textfield2.value来实现。这里parent表示当前框架的父文档,leftr是另一个框架的名称,我们通过...
"jQuery+json异步实现JSP和struts2之间的数据传递"是一个典型的应用场景,它结合了前端JavaScript库jQuery与后端MVC框架Struts2,通过JSON这种轻量级的数据交换格式进行高效的数据交互。下面我们将详细探讨这一主题...
在Web开发中,数据传递是不可或缺的一环,尤其是在基于Java技术的JSP、JavaScript和Servlet环境中。本篇文章将深入探讨这些技术之间的数据交互方式,帮助开发者更好地理解和掌握这些常用的数据传递方法。 首先,...
本文将详细介绍如何在MVC架构下传递表单参数,并探讨几种常用的表单数据传递方法。 #### 表单参数概述 在Web应用中,表单参数通常是指用户通过表单填写的数据。这些数据可以是文本、数字、日期等不同类型的信息。...
在微信小程序中,`<form>`组件用于创建一个表单容器,它允许用户输入数据并通过提交操作将数据传递到服务器或者执行相应的业务逻辑。`<form>`组件提供了自动封装数据、校验数据以及调用后台接口的能力,极大地简化了...
在前端开发中,数据传递是常见的需求之一,特别是在构建多层级界面或组件交互时。`Layui` 是一个轻量级的前端框架,提供了一系列的模块化组件,包括表格、按钮、表单等,方便开发者构建用户界面。本教程将深入讲解...
在进行Web开发时,尤其是使用JSP技术开发动态网站时,我们常常需要处理服务器端Java变量与客户端...同时,在设计网站功能时,应合理规划数据传递的方式和频率,减少不必要的页面刷新和数据提交,提升用户体验。
在这个“Nodejs自定义解析表单数据的中间件案例”中,我们将深入探讨如何使用JavaScript编写自定义的中间件来解析HTTP请求中的表单数据。 ### 1. 中间件概念 中间件在Node.js中是通过Express框架(基于Connect库)...
`@JavascriptInterface`注解确保这个方法只能被JavaScript调用,`@AllowJavascript`则允许返回的数据传递到Java层。 需要注意的是,由于安全原因,从JavaScript调用Android方法可能会受到限制。从Android 4.2(API...
在本主题中,我们将深入探讨如何使用JavaScript对表单数据进行排序。表单数据排序是网页应用中常见的需求,例如,用户可能需要按照特定字段对搜索结果或列表进行升序或降序排列。 首先,理解表单的基本结构至关重要...
在ASP.NET中,数据传递是Web应用程序开发中的关键部分,它涉及到服务器与客户端之间的信息交互。数据传递可以分为两种主要类型:同步传输和异步传输。这两种方式在不同的场景下有着各自的优势,开发者需要根据实际...
### 巧用JavaScript创建智能表单效果 ...以上方法展示了如何使用JavaScript创建智能表单效果以及如何处理字符串和传递参数的基本概念。通过这些技术的应用,可以极大地提高Web应用程序的功能性和用户体验。
网页间数据传递是Web开发中的一个关键概念,它涉及到如何在不同的HTML页面之间共享和交换信息。这在构建多页面应用程序或实现用户导航时尤为重要。本篇将详细讲解几种常见的网页间数据传递方法。 1. **URL参数**:...
在前端,JavaScript可以使用FormData对象将表单数据序列化为POST请求所需的格式。在后端,服务器需要将接收到的请求体数据反序列化为可操作的对象。 总结来说,“用表单传递参数”涉及到HTML表单设计、数据提交方式...
本文将详细介绍如何在ExtJS中使用AJAX来实现前后端之间的数据传递,特别是关注JSON格式的数据传输。 #### 二、ExtJS中的AJAX数据传递 ##### 1. AJAX数据传递方式 - **POST方法**:通常用于提交表单数据到服务器。...
JavaScript 和 .NET 之间的交互是现代 Web 应用程序开发中的关键组成部分,它允许客户端的动态脚本语言与服务器端的强类型编程语言协同工作,从而实现丰富的用户体验和高效的服务器资源管理。本文将深入探讨 ...
**表单间的数据传递**:在Web应用中,JavaScript经常用于处理表单数据。它可以动态验证用户输入,修改表单元素的显示,甚至在提交表单前与服务器进行异步通信(AJAX)。了解如何使用DOM API操作表单元素,以及如何...