toggle value of disabled attribute when JavaScript enabled

Question

I have an input tag on my website that uses javascript for autocomplete ...I want <input> tags' disabled attribute as true when my users don't have javascript enabled on their systems. but when Javascript is enabled I want the value of disabled=false. how do I go about doing that?

what I've done so far:

<input name="xyz" class="xyzautocomplete" type="text" id="name" value="enter name" disabled="true">

will using

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

inside same <input> tag as script="" work for both cases??

IE,

 <input name="xyz" script="document.getElementById("name").disabled = false;" class="xyzautocomplete" type="text" id="0" value="enter name" disabled="True">

IF NOT, how would I do it??

Shouldn't it be .disabled = false since if JavaScript is run you don't want it to be disabled? — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Apr 18, 2020 at 13:14
Then I don't understand your question - what is the problem with the solution you came up with? — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Apr 18, 2020 at 13:17

Alok Mali · Accepted Answer · 2020-04-18 13:34:16Z

1

If the javascript is disabled then none of the javascript syntaxes will work.

You have to do it with Tag

Please try with below solution -

<script>
     <!--
        document.write('<input name="xyz" class="xyzautocomplete" type="text" id="0" value="enter name" >')
     -->
  </script>

  <noscript>
    <input name="xyz" class="xyzautocomplete" type="text" id="0" value="enter name" disabled >
  </noscript>

answered Apr 18, 2020 at 13:34

Alok Mali

2,8913 gold badges20 silver badges33 bronze badges

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

2 Comments

Devarshi Goswami Over a year ago

I want javascript to toggle the disabled attribute when it is enabled to false. the default state of disabled attribute is true.

Alok Mali Over a year ago

But in that case, when Javascript is disabled it will not work.

Mr Lister · Accepted Answer · 2020-04-28 11:26:42Z

1

The other answers are correct with regards to the inline JavaScript. There is no script attribute, and onload isn't defined for inputs, so your script will need to be in a <script> element following the input.

However, what none of the existing answers mention is that disabled is a boolean attribute, that is, its presence or absence determines whether the input is disabled or not. Its value does not matter.

So setting the attribute to a value in JavaScript does not work. The attribute would still be there, just with a different value!
What you need to do is remove the attribute altogether.

document.getElementById("name").removeAttribute('disabled');

<input name="xyz" class="xyzautocomplete" type="text" id="name" value="enter name" disabled="true">

edited Apr 28, 2020 at 11:26

answered Apr 28, 2020 at 8:17

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

Comments

ikiK · Accepted Answer · 2020-04-18 13:23:00Z

0

It is never good way to put JS inline. Put it after the html element. Also you are targeting id of xyz with does not exists. Your id is 0.

document.getElementById("0").disabled = false;

<input name="xyz"  class="xyzautocomplete"  disabled  type="text" id="0" value="enter name">

As you can see input is disabled, but JS makes it enabled. People who don't have JS wont be able to use input.

answered Apr 18, 2020 at 13:23

ikiK

6,5105 gold badges25 silver badges48 bronze badges

Collectives™ on Stack Overflow

toggle value of disabled attribute when JavaScript enabled

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related