Question

我正在编写一个JavaScript函数来预处理表单数据。我需要知道的一件事是使用了多个提交按钮。

粗略地说，脚本有以下概要。

var form=document.querySelector('form#test');
form.onsubmit=processForm;
function processForm() {
    //  how did I get here
}

<form id="test">
    <!-- usual stuff -->
    <button type="submit" name="check">Check</button>
    <button type="submit" name="doit">Do Stuff</button>
</form>

我知道我可以将该功能附加到单独的提交按钮，但如果我将它附加到表单本身，它会更有弹性。

是否有表单属性或其他方法来检查使用了哪个提交按钮？

由于

Answer 1

您可以将click处理程序附加到每个<button>元素，创建一个变量来存储单击的button name属性，或者引用元素，访问属性或元素{ {1}}事件

submit

Answer 2

通常，点击的提交按钮会被视为活动状态。我相信当只有一个提交按钮时，表单将在输入时提交，但是当多个时它只会在点击时提交。

因此，在您的后端，您可以检查是否存在任何表单按钮以了解使用了哪个按钮。

HTML rfc的相关部分： https://www.w3.org/TR/html401/interact/forms.html#h-17.13.2

但是我无法找到良好的浏览器兼容性，因此您的里程可能会有所不同。

Answer 3

我相信我的问题的答案是你不能。一旦submit事件被激活，它似乎不知道或不关心它是如何到达那里的。

我原来的问题中提到的唯一解决方案是将一个监听器附加到提交按钮[s]。

以下是处理代码的存根：

window.onload=init;

function init() {

    var form=document.querySelector('form#test');
    var submitButtons=form.querySelectorAll('button:not([type]),button[type="submit"],input[type="submit"]');
    if(submitButtons.length) {
        for(var i=0;i<submitButtons.length;i++) submitButtons[i].addEventListener('click',process);
    }
    function process(e) {
        var submitter=this;
        var form=this.form;
        //  etc
    }
}

哦，好吧......

JavaScript＆amp; HTML表单：提交者是哪个按钮？

3 个答案: