Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I select a button with a type of submit using Javascript?

Tags:

javascript

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 += '&nbsp;<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.

like image 419
Samantha J T Star Avatar asked Dec 30 '13 13:12

Samantha J T Star


People also ask

Can a button be of type submit?

The <button> tag with a type="submit" attribute creates a submit button.

How does button type submit work?

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.

How do I add a submit button to a form?

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.


3 Answers

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 += '&nbsp;...';
// OR
someElement.querySelector('button[type="submit"]').innerHTML += '&nbsp;...';

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".

like image 68
nnnnnn Avatar answered Oct 29 '22 03:10

nnnnnn


You can use querySelectorAll. It works back to IE8.

document.querySelectorAll('[type=submit]')

JS fiddle here http://jsfiddle.net/X2RLg/

like image 39
Michael Tempest Avatar answered Oct 29 '22 02:10

Michael Tempest


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]); }
}
like image 29
Gabriel Sadaka Avatar answered Oct 29 '22 02:10

Gabriel Sadaka