How to enable a disabled text field?

Question

I wanna know how do I enable a disabled form text field on submit. Also I wanna make sure if user goes back to form or click reset field will show again as disabled.

I tried to use

document.pizza.field07.disabled = false ;

It does disables the field, by clicking reset or hitting back button still keeps it enable.

Please guide.

Adam Rackis · Accepted Answer · 2011-12-13T04:17:21.543

19

To access this element in a more standard way, use document.getElementById with setAttribute

document.getElementById("field07").setAttribute("disabled", false);

EDIT

Based on your comment, it looks like field07 is a name, not an id. As such, this should be what you want:

var allfield7s = document.getElementsByName("field07");
for (var i = 0; i < allfield7s.length; i++)
    allfield7s[i].setAttribute("disabled", false);

edited Dec 13 '11 at 04:17

answered Dec 13 '11 at 04:07

Adam Rackis

82,527
56
270
393

I tried 'this:document.getElementsByName("field07").setAttribute("disabled", false);' but its not working.... field07 is name... – Hassan Z Dec 13 '11 at 04:17
1

Don't bother with buggy *setAttribute*, just set the property directly: `allfield7s[i].disabled = false;` – RobG Dec 13 '11 at 06:20
@Rob - I thought setAttribute was widely supported? – Adam Rackis Dec 13 '11 at 06:33
@AdamRackis: It is widely supported, but the property is simpler, just as standard, better supported and more readable. – Tim Down Dec 13 '11 at 10:20
@AdamRackis—it's widely supported, but implementations are inconsistent. Google "javascript setattribute issues IE". – RobG Dec 13 '11 at 13:32
Thanks @TimDown - didn't realize setAttribute wasn't perfectly supported – Adam Rackis Dec 13 '11 at 15:39
On my Browser Firefox setattribute didn't work. So I used @RobG 's solution. – phrogg Jan 23 '19 at 12:46

zajc3w · Answer 2 · 2013-12-21T21:28:16.480

11

That is the only working solution for Me:

var allfield7s = document.getElementsByName("field07");
for (var i = 0; i < allfield7s.length; i++)
    allfield7s[i].removeAttribute("disabled");

edited Dec 21 '13 at 21:28

answered Dec 21 '13 at 16:11

zajc3w

211
2
3

This is the best answer. Setting disabled to false per the accepted answer will just change the attribute to 'disabled = false' and the element will remain disabled. – Matt West Dec 24 '18 at 04:06

score 8 · Answer 3 · answered Jul 07 '14 at 14:08

8

You can enable a disabled html control with the following JavaScript code.

document.getElementById('elementId').removeAttribute('disabled');

answered Jul 07 '14 at 14:08

Bins Jose

81
1
1

Could you please add a link to the relevant documentation ? – merours Jul 07 '14 at 14:27

score 2 · Answer 4 · answered Dec 13 '11 at 04:43

2

You can also do this with jQuery:

$(function(){
    $("[name='field07']").prop("disabled", false);
});

We simply select all the elements where the name attribute is field07 (using name because you said so in the comments of @AdamRackis's answer) and set its disabled property to false.

More about prop().

answered Dec 13 '11 at 04:43

Purag

16,941
4
54
75

While this works, I downvoted it because using a third party library to change the attribute value of an element is not needed. – Kenton de Jong Jan 22 '18 at 08:15

score 1 · Answer 5 · edited Jul 28 '20 at 11:05

1

You can enable a disabled html control(like, input, textarea, button,...) with the help following code.

To disable:

document.getElementById("id_name").setAttribute("disabled", true);

To enable:

document.getElementById('id_name').removeAttribute('disabled');

edited Jul 28 '20 at 11:05

mechnicov

12,025
4
33
56

answered Jul 28 '20 at 10:17

amol15

11
4

How to enable a disabled text field?

5 Answers5

Linked