用事件处理两个提交按钮

Posted 2023-02-23

【中文标题】用事件处理两个提交按钮

【英文标题】：Handling two submit buttons with evently

【发布时间】：2011-10-31 15:41:30

【问题描述】：

我有一个带有两个提交按钮的表单：

<form>
  ...
  <input type="submit" name="update" value="Update"></input>
  <input type="submit" name="clean"  value="Clean"></input>
</form>

根据我点击的按钮，我必须做两件不同的事情。 update 将向内部结构添加一些表单数据，clean 将清理表单和内部结构。

我遇到的问题是我无法使用 Evently/jQuery 捕捉这两个不同的事件。我可以处理表单/提交事件，但我没有得到有关按下哪个按钮的信息（根据 jQuery 文档“由于未使用按钮提交表单，因此没有序列化提交按钮值”）。

或者我已经尝试捕获更新/单击和清理/单击事件，但我没有成功构建 Evently 目录树来捕获它。这是我目前试图捕捉这些事件的结构：

evently/filterconf/_init/
evently/filterconf/_init/selectors/form
evently/filterconf/_init/selectors/form/clean
evently/filterconf/_init/selectors/form/clean/click.js
evently/filterconf/_init/selectors/form/update
evently/filterconf/_init/selectors/form/update/click.js
evently/filterconf/_init/mustache.html

但是那些click.js 没有被触发。关于如何解决这个问题的任何想法？或者您有什么完全不同的方法来处理 Evently 中的这两个提交按钮的建议吗？

【参考方案1】：

好吧，因为它只会执行 ajax 调用，而不是实际上使用 POST 提交整个表单，所以您甚至不需要将这些按钮作为提交按钮。做吧：

  <button id="btn_update" value="Update"></button>
  <button id="btn_clean"  value="Clean"></button>

并将您的事件文件夹构建为：

evently/filterconf/_init
evently/filterconf/_init/selectors
evently/filterconf/_init/selectors/#btn_clean/
evently/filterconf/_init/selectors/#btn_clean/click.js
evently/filterconf/_init/selectors/#btn_update
evently/filterconf/_init/selectors/#btn_update/click.js

或者，按照你的方法，它会是这样的：

evently/filterconf/_init/selectors/form/submit.js

所以你会附加提交事件，而不是点击事件。

提交处理程序应如下所示：

  function() 
      var form = $(this);
      var doc = form.serializeObject();
      // ...
  

【讨论】：

当我在提交处理程序中执行 serializeObject 时，没有关于按下哪个按钮的信息。

另一种方法（#btn_clean，#btn_update）正在工作。我必须使用$(this).parent("form")

访问表单