JavaScript和HTML表单：提交者是哪个按钮？

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

粗略地说，脚本具有以下大纲。

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>

我知道我可以附加功能，个人提交按钮，但如果我重视它的形式本身会更有弹性。

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

感谢

来源

2016-07-24 Manngo

* “这将是更具弹性” *如何？ – 4castle

@ 4castle为什么它不可靠？我有多个按钮，都需要预处理。原则上，我也可以发送一个'submit（）'调用，它可以绕过按钮，因此也可以发出'onclick'声音。 – Manngo

@StephenRoss从未如此。 '''在功能上等同于'''。 – Manngo

您可以将click处理每个<button>元素，创建一个变量来存储点击buttonname财产，或参考元素，访问属性或元素在submit事件

function processForm(e) { 
    e.preventDefault(); 
    console.log(curr) // `curr`: `name` of clicked `button"` element 
} 

var submit = document.querySelectorAll("button[type=submit]"); 
var curr; 
for (var i = 0; i < submit.length; i++) { 
    submit[i].onclick = function(e) { 
    curr = e.target.name; // store reference to `name`, or element 
    } 
}

来源

2016-07-24 02:45:33 guest271314

通常情况下，点击提交按钮被认为是有效的。我相信，当只有1个提交按钮时，表单将在输入时提交，但当多个提交按钮时将只提交点击。

因此，在您的后端，您可以检查是否存在任一表单按钮以知道使用了哪个按钮。 HTML RFC的

但是我没能找到这个让你的里程可能会有所不同了良好的浏览器兼容性。

来源

2016-07-24 03:18:04 serverSentinel

我相信我的问题的答案是，你不能。一旦激活了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 
    } 
}

哦...

来源

2016-07-25 03:20:52 Manngo

JavaScript和HTML表单：提交者是哪个按钮？

回答

相关问题