A-A+

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

2016年01月07日 web前端设计 暂无评论 阅读 5 views 次

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

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

  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吧:

  1. <asp:linkbutton runat="server" id="btnnewtarget" text="new target" target="_blank"  onclick="bnnewtarget_click" />  

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

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

  1. <a id="btnnewtarget" target="_blank"  href="javascript:__dopostback('btnnewtarget','')">new target</a>  

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

  1. $("#btnbuttonnewtarget,#btnnewtarget").click(function () {   
  2. $("form").attr("target", "_blank");   
  3. });  

对于同一个页面post(示例中是default.aspx页面),它和(1)的效果截然不同。可能您习惯要问为什么.

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

标签:

给我留言