Reputation: 25
I have created an form in which I have made the input field disabled by default->
<input class="name" type="text" maxlength="50" value="Hritika Agarwal" disabled="" />
I want to make this editable on button click. So created a button like this ->
<button class="accept-btn" onclick="myFunction()">Edit</button>
function myFunction() {
document.getElementById("name").removeAttribute("disabled");
}
But It's not working.
I have even tried like this also->
function myFunction() {
document.getElementById("name").style.disabled = "false";
}
But again nothing happened. How could I resolve this>
Upvotes: 1
Views: 952
Reputation: 148
if you want to select elemnt by class name use getElementsByClassName
.
document.getElementsByClassName("name")[0].disabled = false;
If
select elemnt by id use getElementById
.change input to
<input id="name" type="text" maxlength="50" value="Hritika Agarwal" disabled="" />
then
document.getElementById("name").disabled = false;
Upvotes: 1
Reputation: 595
function myFunction() {
document.getElementsByClassName("name")[0].removeAttribute("disabled");
}
Or
<input class="name" id="name" type="text" maxlength="50" value="Hritika Agarwal" disabled="" />
Upvotes: 2
Reputation: 2347
You use getElementById
to find an element with the id name
but there is not such thing. Use <input id="name"
instead of class, then the first will work.
The second can not work, since disabled
is not a style-property.
Upvotes: 2