11

有没有办法确定哪个元素从 onsubmit 处理程序中提交了表单？尝试编写一个知道单击了哪个元素的通用处理程序。例如，给定这种形式：

<form onsubmit="onSubmitHandler">
    <input type="submit" name="submit1" />
    <input type="submit" name="submit2" />
</form>

如何在 onSubmitHandler 内部确定单击了哪个提交按钮？我尝试了 event.target/event.srcElement，但这给出了表单，而不是实际的提交按钮。

更新：我在这里写一个通用控件，所以它不知道表单上有什么。该解决方案需要在不知道和更改表单的 html 的情况下工作。我的后备是遍历 DOM 以查找所有可能导致提交的按钮，但我想避免这种情况。

4

5 回答 5

3

另一种解决方案是将事件触发器从表单的提交事件移动到提交元素的 onclick 事件，如下所示：

<form name='form1'>  
    <input type="submit" name="submit1" onclick="onSubmitHandler"/>
    <input type="submit" name="submit2" onclick="onSubmitHandler"/>
</form>

在您的处理程序函数中，您可以简单地通过检查事件目标的名称来确定提交元素，如果您需要访问表单的信息或其他元素，您可以从提交元素的“表单”属性中获取。

于 2009-02-12T16:18:50.810 回答
1

我不会使用标准的提交按钮类型。

让提交函数接受一个额外的参数来表示提交它的元素，并且按钮将有一个 onclickthis作为参数发送：

<input type="button" onclick="submitHandler(this)">
于 2009-02-12T16:45:13.493 回答
0

我的后备是遍历 DOM 以查找所有可能导致提交的按钮，但我想避免这种情况。

...并向它们添加单击侦听器以存储“最后单击”按钮，然后由提交侦听器读取，对吗？

我想不出别的办法了，抱歉。

于 2009-02-12T16:54:33.220 回答
0

此解决方案适用于 Firefox。我还没有在其他兼容的浏览器或 IE 中检查它。
我对 IE 不太抱有希望，你必须研究它并发布你的结果。

<form id="myForm">
    <input type="submit">
    <input type="submit">
</form>

_

document.getElementById('myForm').addEventListener( 'submit', function( e ){
    e.preventDefault();
    e.explicitOriginalTarget.style.background = 'red';
}, false );
于 2009-02-12T17:04:01.827 回答
0

单击事件冒泡，因此您可以向表单本身添加一个“onclick”侦听器，以检查单击目标源是否是提交按钮；如果是这样，请将它的引用存储在与您可以从 onsubmit 处理程序访问的表单相关联的地方。

如果您也想正确处理“Enter”提交的表单，请监听表单的“onkeypress”或“onkeydown”事件，检查“Enter”，如果事件目标不是提交按钮，则清除提交按钮信息.

于 2013-05-11T18:37:42.467 回答