代码之家  ›  专栏  ›  技术社区  ›  GetFree

如何知道哪个提交按钮触发了OnSubmit事件

  •  9
  • GetFree  · 技术社区  · 16 年前

    当表单中有多个提交按钮时,是否有一种方法可以知道是哪个按钮激发了 onsubmit 不向按钮本身添加代码的事件??


    编辑: 我需要在客户端进行检查,即使用javascript。

    4 回复  |  直到 10 年前
        1
  •  5
  •   naikus    16 年前

    “提交”事件不是由按钮触发的,而是由“表单”触发的。快速测试证明了这一点:

      <form id="myform">
         <input id="email" type="text" value="1st Email" />
         <input id="action1" type="submit" value="Action 1" />
         <input id="action2" type="submit" value="Action 2" />
      </form>
    
      <script type="text/javascript">
    
         document.getElementById("myform").onsubmit = function(evt)  {
            var event = evt || window.event;
            alert(event.target.id); // myform
            alert(event.explicitOriginalTarget.id); // action2 (if action2 was clicked)
                                                    // but only works in firefox!
         }
    
      </script>
    

    虽然在火狐中,你可以使用 event.explicitOriginalTarget 属性来获取单击导致引发提交事件的输入(提交)。(如果你想知道)

    所以你最好的选择是:

    • 对提交按钮具有不同的值,或者
    • 将这些按钮设为普通按钮,并通过javascript单击它们的处理程序。
        2
  •  1
  •   Cristian Sanchez    16 年前

    在每个按钮上有一个事件监听器算是在添加代码吗?否则,无法查看是哪个按钮触发了提交事件,除非您希望在事件期间向下更新并计算鼠标位置并将其与按钮位置进行比较。

    否则,下一个最好的方法是为按钮的Click事件分配一个事件处理程序,并将该按钮的名称分配给一个可以签入表单的Submit事件的变量。

        3
  •  1
  •   James Black    16 年前

    我可以想出几种方法。

    您可以使用不同的值,而不引人注目的javascript可以帮助您实现这一点。

    关于此方法的一个讨论(对每个按钮使用不同的值)如下:

    http://www.chami.com/tips/internet/042599I.html

    我倾向于用不同的 name 每个按钮的属性。

    这里有一个博客: http://www.codetoad.com/javascript/multiple.asp

    我不遵循这两种方法中的任何一种,哪种方法最有效将取决于不同的因素,例如,您是使用javascript处理提交按钮,还是服务器获取表单,然后必须找出用户想要什么。

    就个人而言,我更喜欢使用Ajax方法,现在,我只需在页面加载后将事件附加到按钮上,使用不引人注目的JavaScript,然后根据用户选择调用正确的函数,但这取决于是否可以向HTML页面添加脚本链接。

    更新:

    为了使用JavaScript实现这一点,最简单的方法是在单击按钮时附加一个事件,然后查看名称以决定如何处理它。

    实际上,表单从来没有真正需要提交到服务器,但是您可以通过包装参数(选项)并将它们发送到服务器来处理后台的所有事情,并让用户知道结果。

        4
  •  1
  •   NoPro    10 年前

    很抱歉把这条旧线热了。这个问题在这里没有得到回答,但以前这里只给出了实际解决方法。

    但事件对象 做 携带启动它的对象的信息。在处理程序中 B4提交(e) 您可以这样获得提交按钮:

    function b4submit(e) {
        var but = e.originalEvent.explicitOriginalTarget;
        ...
    }
    

    但它是一个HTML对象,具有您分配给它的所有属性,如名称、ID、值等。

    我在调试之后遇到了这个问题,我认为作为解决这个问题的一个干净的解决方案,它可能会引起更广泛的兴趣。