动态改变html表单的Target的jquery代码

“页面中有一个form,有些个submit按钮或者链接按钮需要点击后打开新页面。我们如何让这些个按钮将表单信息提交到正确的对应页面?”

这个问题看上去很简单。

熟悉asp教程.net开发的都应该很清楚,通过asp.net教程 webform,我们可以对runat=”server”的form进行属性设置:

view sourceprint?1 <form method="post" action="default.aspx" id="form1">

如你所知,method属性是http数据传输方法,action属性是要提交的目标页,至于打开新页面,设置target为_blank即可。

对于通常的页面交互,一个或多个按钮提交一个相同的表单这样做没有问题,可是如果按钮需要post的页面不尽相同,这个方法就显得无能为力。因为这种解决方法是“全局”的,设置一次,影响所有表单提交元素。

2、runat=server的form
到这里,也许有人会“幸灾乐祸”地说这都是web form的form机制不好,一个页面只能有一个runat=server的form。我们完全可以在一个页面中多定义几个form,对于不同的提交按钮,我们给它设置不同的form(即分割提交按钮到不同的表单),这样不就解决问题了吗(新浪、网易和搜狐等很多页面,打开一个网页并查看源码可以看到很多form,我估计都是这么用的)?

但是,这不是web form独有的“错”,其他开发框架也有类似问题
简单实用的解决方案
(1)、直接使用linkbutton或者链接控件?
通常情况下,我们很容易想到用现成的link控件的属性来实现页面提交。比如linkbutton吧:

view sourceprint?1 <asp:linkbutton runat="server" id="btnnewtarget" text="new target" 

2                    target="_blank"  onclick="bnnewtarget_click" />

虽然linkbutton没有target属性,但是像上面那样设置也没有问题。

但是,最怕的就是这个但是。在查看生成的html源码的时候:

view sourceprint?1 <a id="btnnewtarget" target="_blank"    href="网页特效:__dopostback('btnnewtarget','')">new target</a>

我们发现生成的html源码里a元素的href属性已经被设置了一段让人眼熟的控制回发脚本。就是这一段脚本,让我们提交数据到新窗口的目的落空。为什么呢?
为这些个按钮设置form的target吧!
通过下面的脚本,可以轻松实现我们的预定功能:

view sourceprint?1 $("#btnbuttonnewtarget,#btnnewtarget").click(function () { 

2         $("form").attr("target", "_blank"); 

3     });

对于同一个页面post(示例中是default.aspx页面),它和(1)的效果截然不同。可能您习惯要问为什么
那么真正的“表单提交进程”发生了什么呢?顺着原文的意思,看上去好像是新页面打开,前一页的表单数据提交到新打开的页面,貌似是前一页(current page)的_dopostpack函数“跳”到当前新打开的页面(也叫current page)触发clickhandler……不就是“current page”的置换吗?可能我自己的理解现在还有偏差,英语水平下降得令人抓狂,必须要补补了。如果您有更合适的好理解的解释说明,请不吝赐教。

时间: 2025-01-20 10:05:58

动态改变html表单的Target的jquery代码的相关文章

jQuery动态设置form表单的enctype值(实现代码

本篇文章是对在jQuery中动态设置form表单的enctype值的实现代码进行了详细的分析介绍,需要的朋友参考下   代码简单, 注意2个地方enctype和encoding 复制代码 代码如下: $("#form").attr("enctype", "multipart/form-data");             $("#form").attr("encoding", "multipar

jQuery动态设置form表单的enctype值(实现代码)_jquery

代码简单, 注意2个地方enctype和encoding 复制代码 代码如下: $("#form").attr("enctype", "multipart/form-data");            $("#form").attr("encoding", "multipart/form-data");            $("#form").attr(&quo

Extjs读取xml文件生成动态表格和表单

最近开发项目,需要动态读取xml文件,生成Extjs界面,xml文件通过前台页面的按钮事件传进来,可以在网上查找[javascript 弹出子窗口]的相关文章</a> 获取弹出窗口url后的参数方法: // 获取url后的参数值 function getQueryStringValue(name) { var url = window.location.search; if (url.indexOf('?') < 0) { return null } var index = url.in

Extjs读取xml文件生成动态表格和表单(续)

很多人向我要[Extjs读取xml文件生成动态表格和表单]一文的源代码,故花了些时间将源代码整理出来,并重新编写此文,分享当时的技术思路. 需要的文件有: 1.html文件,此处以SASC.search.MtrUse.html为例 2.Extjs相关文件,见SASC.search.MtrUse.html文件中的引用 3.工具类,DomUtils.js 4.核心js类:SASC.extjs.search.MtrUse.js 5.java代码 详细html和js代码见相关文件,这里先描述思路. 首先

如何解决jQuery Validation针对动态添加的表单无法工作的问题?

为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在<利用动态注入HTML的方式来设计复杂页面>一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案.我们知道ASP.NET MVC默认集成了jQuery Validation,但是对于通过JavaScript动态添加的表单,客户端验证默认情况下是失效的. 还是以前文涉及的"联系人管理"为例,在一个ASP.NET MVC应用中定义了如下两个类型,Contact封装联系人信息,HomeCo

JavaScript动态创建form表单并提交的实现方法_javascript技巧

本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f

动态设置form表单的action属性的值的简单方法_jquery

用jQuery时,可如下设置: form表单: <form name="myform" id="myform" action="ssss" method="post" onsubmit="getUrl();"> javascript方法: <script type="text/javascript"> function getUrl(){ $('form').at

jQuery改变form表单的action,并进行提交的实现代码_jquery

jQuery改变form表单的action,并进行提交的实现代码 <s:form action="/student/traScore.action?method=list" id="queryForm" name="queryForm"> </s:form> //导出学生实训成绩 function exportScore(){ var path = "${ctx}/student/traScore.action?

真正解决表单重复提交问题php代码

  以前用的js表单防止重复提交方法  代码如下   <script type="text/javascript"> var checkSubmitFlg = false; function checkSubmit() {  if (!checkSubmitFlg) { // 第一次提交   checkSubmitFlg = true;   return true;  } else { //重复提交   alert("Submit again!");