关于多提交按钮的表单提交问题(用客户端代码判断被点击的按钮)

来源:互联网 发布:双系统备份软件 编辑:程序博客网 时间:2024/05/16 11:30

问题描述:假设有一个留言板,在管理员页面有“回复“和“删除“2个功能,点击回复以后表单直接提交执行回复操作,但点击删除时需要弹出一个确认框,当用户确认以后才能提交执行删除操作。显然这里就需要用到客户端脚本。

下面是我的做法:
服务器端:使用VB.net
客户端:适用JavaScript

表单的部分代码如下:
<form id="Form1" method="post" runat="server" onsubmit="return inputValidate()">
...
<asp:Button id="Button1" tabIndex="2" runat="server" Text="回复"></asp:Button>
<INPUT type="reset" value="重置">
<asp:Button id="Button2" runat="server" Text="删除"></asp:Button>
...
</form>
因为表单有2个按钮,所以表单提交前需要判断提交的按钮是哪个。可以采用下面语句
event.srcElement.id
或者
event.srcElement.value
来判断是哪个按钮提交了。
一开始你可能认为这个判断应该写在inputValidate()函数里面,在表单发生提交事件的时候判断。
但实际上这是不行的,因为我们需要的事件源是提交按钮,那么这个判断就只能写按钮的click事件函数里面。
但是这样又如何控制表单提交呢,因为和表单提交有关系的是submit事件函数。
好在click事件发生在submit事件之前,这样就有了下面的这个解决办法:
一个中间变量,在click事件发生的时候把event.srcElement.id或者event.srcElement.value保存下来,在之后的submit事件中判断这个中间值,然后采取不同的动作。代码如下:

<script language="javascript">
<!--
    var bt;
    function check(){
         bt=event.srcElement.value
    }
    function inputValidate(){
        if (bt=="删除")
          return confirm("确实要删除留言吗?");
         else{
            //do someting
          }
         return true;
    }
     //-->
  </script>

如果细心的话,你会发现在上面的表单里面我没有为删除按钮指定click事件的方法。这是因为这个按钮是一个服务器控件,如果你在标签中指定onclick属性内容,服务器将这个内容和一段服务器代码关联起来,而我门现在需要的是和客户端代码关联。怎么解决呢?
好在服务器控件的Attributes属性有Add方法,可以动态给控件加属性和属性的值。这里加的属性就不会被误认为是绑定服务器端代码了。
在Page_Load方法中加入下面代码。
Me.Button2.Attributes.Add("onclick", "check()")
这样一来,整个问题就解决了。

原创粉丝点击