CODEWITHSUNDEEP
javascript
user1943020
user1943020

Reputation:

How can I change all the elements in a form to be disabled using only javascript?

I have this HTML:

     <div id="account-form">
        <form action="/Account/Login" id="login-form" class="form" method="post">
            <div id="input-fields">
                <div>
                    <input class="medium-margin" id="UserName" name="UserName">
                </div>
                <div>
                    <input class="medium-margin" id="Password" name="Password">
                </div>
            </div>
            <button class="medium glossy" id="login" type="submit">Login</button>
            <button class="medium glossy" id="register" type="button" onclick="location.href='/Account/Register'">Register</button>
        </form>
    </div>

I am using the following to disable the buttons:

   document.getElementById("login").disabled = true;
   document.getElementById("register").disabled = true;

What I would like is to disable the <input> and the <button> . Is there a way I could do this without getting each element by Id.

Upvotes: 0

Views: 455

Answers (6)

vikaskimt
vikaskimt

Reputation: 56

try this:- 

$('input').attr('disabled',true);

or 

$('button').attr('disabled',true);

Upvotes: 0

Jenson M John
Jenson M John

Reputation: 5689

Using Javascript:

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
     inputs[i].disabled = true;
}

If You want to disable multiple buttons, You can use same method.

Using jQuery:

 $('input').each(function() {

                $(this).attr({
                    'disabled': 'disabled'
                });

        });

Upvotes: 0

abc123
abc123

Reputation: 262

Try this:

$(".medium-margin").attr('disabled','disabled');

You can do it by class name

Upvotes: 1

Ravi Teja
Ravi Teja

Reputation: 350

<div id="account-form">
        <form action="/Account/Login" id="login-form" class="form" method="post">
            <div id="input-fields">
                <div>
                    <input class="medium-margin" id="UserName" name="UserName">
                </div>
                <div>
                    <input class="medium-margin" id="Password" name="Password">
                </div>
            </div>
            <button class="medium glossy" id="login" type="submit" disabled>Login</button>
            <button class="medium glossy" id="register" type="button" onclick="location.href='/Account/Register'" disabled>Register</button>
        </form>
    </div>

The above code works for you, i think. Try it.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You can get elements using getElementsByTagName with return collection HTML elements

var inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
    inputs[i].disabled  = true;
}

Demo

Upvotes: 0

user762330
user762330

Reputation:

Get the elements like this: document.getElementsByTagName('input') and document.getElementsByTagName('button')

Upvotes: 0

Related Questions