javascript 如何使用Javascript选择具有提交类型的按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20840128/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I select a button with a type of submit using Javascript?
提问by Samantha J T Star
I have two buttons like this:
我有两个这样的按钮：
<button class="medium" id="register" type="button"
onclick="location.href='/Account/Register'">Register</button>
<button class="medium default" id="login" type="submit">Login</button>
My Javascript selects the button by id:
我的 Javascript 通过 id 选择按钮：
<script type="text/javascript">
(function () {
document.getElementsByClassName('form')[0]
.addEventListener("submit", function (ev) {
document.getElementById('login').innerHTML += ' <i class="fa fa-spin fa-spinner" data-ng-show="fetching.length > 0"></i>';
}, false);
})();
</script>
How can I change this so the javascripts selects the button with a type of "submit" or a button with a class of "submit" if that's not possible?
如果不可能，我该如何更改它以便 javascripts 选择具有“提交”类型的按钮或具有“提交”类的按钮？
Note that I would like to do this because the javascript is used by many forms. I need a common way to find the "submit" button.
请注意，我想这样做是因为 javascript 被许多表单使用。我需要一种通用的方法来找到“提交”按钮。
回答by nnnnnn
You can use .querySelector()to find the first element matching a CSS style format selector - it works as a method of documentto search (obviously) the whole document, or as a method of an element to search within only that element:
您可以使用.querySelector()来查找与 CSS 样式格式选择器匹配的第一个元素 - 它可以用作document搜索（显然）整个文档的方法，或者用作仅在该元素中搜索的元素方法：
document.querySelector('button[type="submit"]').innerHTML += ' ...';
// OR
someElement.querySelector('button[type="submit"]').innerHTML += ' ...';
The latter is probably most useful to you since you want to find a submit button that presumably is in a form, and you already have a reference to the form: within a submit handler attached to the form with addEventListener()you can use this.querySelector(...).
后者可能对您最有用，因为您想找到一个可能在表单中的提交按钮，并且您已经拥有对表单的引用：在附加到表单的提交处理程序中，addEventListener()您可以使用this.querySelector(...).
Demo: http://jsfiddle.net/h6uuN/
演示：http: //jsfiddle.net/h6uuN/
The .querySelector()method is supported by pretty much all modern browsers, but (as always) a note about IE: supported from IE8 onwards. But since you're using addEventListener()presumably you don't care about old IE anyway.
.querySelector()几乎所有现代浏览器都支持该方法，但（一如既往）关于 IE 的说明：从 IE8 开始支持。但是由于您addEventListener()大概在使用，所以无论如何您都不关心旧的 IE。
If you did need to support old versions of IE you can use .getElementsByTagName()to find all button elements and then loop through them looking for the one that has type="submit".
如果您确实需要支持旧版本的 IE，您可以使用它.getElementsByTagName()来查找所有按钮元素，然后在它们中循环查找具有type="submit".
回答by Michael Tempest
You can use querySelectorAll. It works back to IE8.
您可以使用 querySelectorAll。它可以恢复到 IE8。
document.querySelectorAll('[type=submit]')
JS fiddle here http://jsfiddle.net/X2RLg/
JS 小提琴在这里http://jsfiddle.net/X2RLg/
回答by Gabriel Sadaka
You could get all buttons on the page by doing this:
您可以通过执行以下操作获取页面上的所有按钮：
var buttons = document.getElementsByTagName("button");
Then you can iterate through the array and find all buttons with 'submit' as the value of their type property.
然后，您可以遍历数组并找到所有将“提交”作为其 type 属性值的按钮。
var submits = [];
var i;
for(i = 0; i < buttons.length; i++) {
if(buttons[i].type == "submit") { submits.push(buttons[i]); }
}
