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:
<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?
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.
The <button> tag with a type="submit" attribute creates a submit button.
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value. reset: The button resets all the controls to their initial values.
The Submit Button The <input type="submit"> defines a button for submitting the form data to a form-handler. The form-handler is typically a file on the server with a script for processing input data. The form-handler is specified in the form's action attribute.
You can use .querySelector()
to find the first element matching a CSS style format selector - it works as a method of document
to search (obviously) the whole document, or as a method of an element to search within only that element:
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(...)
.
Demo: 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.
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"
.
You can use querySelectorAll. It works back to IE8.
document.querySelectorAll('[type=submit]')
JS fiddle here http://jsfiddle.net/X2RLg/
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.
var submits = [];
var i;
for(i = 0; i < buttons.length; i++) {
if(buttons[i].type == "submit") { submits.push(buttons[i]); }
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With