How do I disable TextBox using JavaScript?

Question

earlier I asked for help disabling a Button when a drop down menu item was selected. I was given some code that did the trick but now I need the same with a Textbox and for some odd reason its not working can you have a look for me...

HTML:

<form id="frmColor">
    <input type='TextBox' id='color' />
    <input type='submit' value='Change Color' id="colorSubmit"/>
 </form>

Javascript:

  tools.eraser = function () {
    var tool = this;
    this.started = false;
    var varPenColor = "White";
    context.strokeStyle = varPenColor;
    document.getElementById('frmColor').colorSubmit.disabled=true;
    document.getElementById('frmColor').color.disabled=true;

Any ideas why it wont disable the text box?

Thanks

type TextBox don't exists ... use instead <input type="text" id="color" /> link — Patrick Ferreira
– Patrick Ferreira, Commented Apr 11, 2011 at 17:22

Pointy · Accepted Answer · 2011-04-11 17:39:15Z

39

Form elements can be accessed via the form's DOM element by name, not by "id" value. Give your form elements names if you want to access them like that, or else access them directly by "id" value:

document.getElementById("color").disabled = true;

edit — oh also, as pointed out by others, it's just "text", not "TextBox", for the "type" attribute.

You might want to invest a little time in reading some front-end development tutorials.

edited Apr 11, 2011 at 17:39

answered Apr 11, 2011 at 17:21

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jino Shaji · Accepted Answer · 2017-09-24 10:55:21Z

5

With the help of jquery it can be done as follows.

$("#color").prop('disabled', true);

edited Sep 24, 2017 at 10:55

Jino Shaji

1,10114 silver badges28 bronze badges

answered Dec 9, 2013 at 9:19

vijay as vj

691 silver badge2 bronze badges

2 Comments

user4914655 Over a year ago

jQuery is not JavaScript. please do not answer JavaScript questions with jQuery responses.

John Lord Over a year ago

actually it is. It's written entirely in javascript.

Kickass · Accepted Answer · 2015-11-22 18:13:38Z

2

Here was my solution:

Markup:

<div id="name" disabled="disabled">

Javascript:

document.getElementById("name").disabled = true;

This the best solution for my applications - hope this helps!

edited Nov 22, 2015 at 18:13

answered Nov 22, 2015 at 18:08

Kickass

1,15210 silver badges16 bronze badges

Comments

Abhijit · Accepted Answer · 2017-12-01 06:49:52Z

0

You can use disabled attribute to disable the textbox.

document.getElementById('color').disabled = true;

edited Dec 1, 2017 at 6:49

answered Dec 1, 2017 at 6:46

Abhijit

2521 silver badge7 bronze badges

1 Comment

Angel Politis Over a year ago

The accepted answer has already provided the solution you recommend 5+ years ago!

Collectives™ on Stack Overflow

How do I disable TextBox using JavaScript?

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related