`
qwjcool
  • 浏览: 68954 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

    博客分类:
  • .NET
阅读更多

问题描述:假设有一个留言板,在管理员页面有“回复“和“删除“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()")
这样一来,整个问题就解决了。

分享到:
评论

相关推荐

    php实现表单多按钮提交action的处理方法

    除了上述方法,还有其他处理多按钮表单的方式,例如使用JavaScript在客户端进行预处理,或者在服务器端使用更复杂的逻辑来判断按钮。然而,对于简单的场景,使用PHP判断表单提交值的方式已经足够实用。 需要注意的...

    一个from表单提交多个功能

    但是,如果希望在同一个表单中实现多个功能,则需要借助客户端脚本来动态改变`action`属性的值,从而控制表单提交的目标地址。 #### HTML结构 首先,我们需要构建一个包含多个按钮的表单: ```html &lt;!-- 提交...

    html5点击弹出手机登录注册表单提交代码

    总结来说,“html5点击弹出手机登录注册表单提交代码”涉及到HTML5的表单元素、CSS的显示控制、JavaScript事件处理、表单验证、离线存储以及AJAX提交等多个知识点。理解和掌握这些技术,将有助于构建高效、用户友好...

    表单重复提交问题1

    - **禁用表单按钮**:在表单提交后,禁用提交按钮,防止用户点击多次。 - **使用POST/REDIRECT/GET模式**:在处理POST请求后,使用`sendRedirect()`重定向到一个新的GET请求,这样刷新页面不会再次执行POST。 - **...

    防止表单重复提交(asp.net )

    - JavaScript禁用表单提交:在提交表单后,可以禁用提交按钮,以防止用户再次点击。 - 使用HTTP-only cookies:存储一个提交标志,当表单提交后设置此标志,后续请求检查该标志以防止重复提交。 - **结合服务器...

    分类留言系统(表单提交)源代码

    在网页上,通常会有一个HTML表单,包含各种输入元素如文本框、文本区域、选择列表等,用户填写信息后点击提交按钮,这些数据就会被发送到服务器。在服务器端,ASP脚本接收到这些数据,并根据预设的逻辑进行处理,...

    在客户端限制表单重复提交有两种方法

    在客户端限制表单重复提交是Web开发中一个重要的实践,主要目的是防止用户意外或恶意地多次提交同一份数据,导致数据库出现重复记录或者系统逻辑出错。本文将详细阐述两种客户端限制表单重复提交的方法,并结合...

    Asp.net防止页面被多次提交

    当用户点击提交按钮后,可能会因为网络延迟、误操作等原因而重复点击提交按钮,导致数据被多次发送到服务器,从而引发一系列的问题,比如数据库记录重复插入等。 #### 一、问题分析 在 ASP.NET 中,用户通过点击...

    防止NET按钮重复点击方法

    当用户在网络条件不佳或系统响应较慢的情况下连续点击按钮时,可能会导致多次触发相同的操作,如提交表单、执行数据库操作等,进而引发一系列的问题,比如数据冗余、不必要的服务器负载增加等。 #### 方法概述 ...

    图片按钮提交与表单重复提交问题探讨

    在有多个提交按钮的情况下,可以使用JavaScript来禁用所有的提交按钮,确保在任一按钮被点击后,其它所有按钮都处于不可用状态。文档提供了一段示例代码,通过`document.getElementsByName('t1')`获取所有名为`t1`的...

    springboot2.1+redis+拦截器 防止表单重复提交

    当用户点击提交按钮多次或者由于网络延迟导致的重复提交,服务器可能会接收到相同的数据请求多次,这可能会对业务逻辑产生不良影响。例如,在电商网站中,如果用户多次点击购买按钮,可能会导致订单数量错误。 为了...

    .net 后台提交表单并返回结果

    在这个过程中,`a.aspx`页面作为客户端表单的发起者,通过POST或GET方法将数据提交到`b.aspx`页面进行处理,然后`b.aspx`根据接收到的数据进行业务逻辑操作,并可能返回相应的结果给用户。 1. **HTML表单(Form)**...

    JavaScript防止表单重复提交代码,指定时间内禁止重复点击.zip

    JavaScript作为客户端脚本语言,可以用来实现这一功能,以避免用户无意或恶意地连续点击提交按钮,导致服务器接收到重复的请求。本示例主要探讨如何在JavaScript中实现防止表单重复提交的功能,并结合一个简单的登录...

    让submit只提交一次

    然而,在网络不稳定或用户误操作的情况下,可能会出现重复提交的情况,例如用户在网络延迟时多次点击提交按钮,或者浏览器的后退功能导致表单被重新提交。这不仅可能导致数据库数据的冗余,还可能引起业务逻辑错误,...

    阻止表单提交按钮多次提交的完美解决方法

    当用户快速连续点击提交按钮,特别是在网络延迟或页面响应较慢的情况下,浏览器可能会发送多个请求,导致表单数据被多次提交。为了避免这种情况,我们需要采取措施来限制用户只能提交表单一次。 一种常见的解决方案...

    ASP.NET中防止刷新页面造成表单重复提交

    1. **使表单按钮失效**:即在用户点击提交按钮后使其失效,以确保表单只能被提交一次。这种方法虽然简单有效,但用户体验较差,尤其是在用户不小心多次点击提交按钮时,可能会导致数据丢失或操作中断。 2. **清除...

    flash 提交表单3.

    例如,可以监听按钮点击事件,当用户提交表单时触发数据验证和发送数据到服务器。 3. 数据提交:Flash表单通常使用HTTP协议通过XMLHttpRequest对象(或在较早版本中使用LoadVars类)向服务器发送POST或GET请求,将...

    在IE的模式窗口中,通过表单提交到本页,并通过javascript获取提交的参数

    然而,这里提到的是一个特殊的情况,即表单数据被提交到同一个页面,并且页面使用JavaScript来捕获和处理这些提交的参数。 在Web开发中,表单提交是用户与网页交互的重要方式,常用于收集用户输入的数据。表单通过`...

    jsp项目放置表单重复提交

    当用户点击提交按钮后,由于网络延迟或刷新页面等原因,可能会导致同一个表单的数据被多次发送到服务器。例如,如果用户在购物网站上添加商品到购物车,重复提交可能导致商品数量异常增加,对业务逻辑造成影响。 ...

    jquery validation 多表单,多按钮,分组验证

    在`jqueryvalidationDemo`这个压缩包中,包含了一个使用jQuery Validation插件进行多表单、多按钮、分组验证的示例项目。你可以下载并运行这个项目,以便更深入地了解如何在实际项目中应用这些功能。 通过以上介绍...

Global site tag (gtag.js) - Google Analytics