Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

使提交函数采用一个额外的参数来表示提交它的元素，该按钮将有一个onclick，它将this作为参数发送：

<input type="button" onclick="submitHandler(this)">

Answer 3

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

...并添加点击监听器以存储“最后点击”按钮，然后由提交监听器读取，对吧？

我想不出任何其他方式，抱歉。

Answer 4

此解决方案适用于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 );

Answer 5

单击事件气泡，因此您只需向表单本身添加“onclick”侦听器，即检查单击目标源是否为提交按钮;如果是这样，请在与您可以从onsubmit处理程序访问的表单相关联的位置存储对它的引用。

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

确定从onsubmit中提交表单的元素

5 个答案: