Cannot disable text input based on dropdown list selection

Question

I have an html form with a drop down list :

<select id="pjsaupf" name="pjsaupf" onChange="changeState()">
        <option value="nu">Nu se aplica</option>
        <option value="pfa">Persoana Fizica Autorizata PFA</option>
        <option value="pja">Persoana Juridica Autorizata PJA</option>   
</select>

-- also tried with onchange instead of onChange. Nothing changed.

And i want that when i select the option with the value "nu" to have the following text form disabled, and when choosing "pfa" or "pja" to be enabled :

<input type="text" id="company" name="company" class="form-control" placeholder="Companie" disabled>

I tried many javascript codes, I will post the most relevant ones. The problem is that when I select "nu" , the "company" is disabled, and it it okay, when i select "pja", it is enabled, and it is okay, but when i select "pfa" it is disabled but should be enabled here..don't figure out what's wrong..

javascript codes:

<script>
function changeState() {
    if(document.getElementById("pjsaupf").value == "nu") {
        document.getElementById("company").disabled=true;
    }else

    if(document.getElementById("pjsaupf").value == "pfa") {
        document.getElementById("company").disabled=false;
    }
    else
    if(document.getElementById("pjsaupf").value == "pja") {
    document.getElementById("company").disabled=false;
    } 
}
</script>

and the alternative code :

<script>
var select = document.getElementById('pjsaupf');

function changeState() {
    switch (this.value) {
        case '1':
            document.getElementById("company").disabled=true;
            break;
        case '2':
            document.getElementById("company").disabled=false;
            break;
        case '3':
            document.getElementById("company").disabled=false;
            break;
    }
}

select.addEventListener('change', changeState);

</script>

EDIT : I'm running on localhost

Shubham Agrawal · Accepted Answer · 2019-06-15 20:50:34Z

1

I tried your code, and it seems that everything is working fine. When you select nu, company is getting disabled. When you select pfa or pja, the company is enabled.

Try running the same code in Incognito mode. I think your javascript is cached by your browser and it is not getting updated with the latest code.

Following is a demo:

function changeState() {
    if(document.getElementById("pjsaupf").value == "nu") {
        document.getElementById("company").disabled=true;
    }else

    if(document.getElementById("pjsaupf").value == "pfa") {
        document.getElementById("company").disabled=false;
    }
    else
    if(document.getElementById("pjsaupf").value == "pja") {
    document.getElementById("company").disabled=false;
    } 
}

<select id="pjsaupf" name="pjsaupf" onChange="changeState()">
        <option value="nu">Nu se aplica</option>
        <option value="pfa">Persoana Fizica Autorizata PFA</option>
        <option value="pja">Persoana Juridica Autorizata PJA</option>   
</select>

<input type="text" id="company" name="company" class="form-control" placeholder="Companie" disabled>

answered Jun 15, 2019 at 20:50

Shubham Agrawal

1822 silver badges13 bronze badges

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

10 Comments

Anais Over a year ago

I tried also with Microsoft edge..no change in the behaviour of the text input. Sometimes none of them get enabled.. I'm running on localhost, maybe that's the problem?

Arleigh Hix Over a year ago

@Anais Them? as in plural? your only showing us one

Shubham Agrawal Over a year ago

I checked using localhost as well (on chrome and firefox). It works perfectly fine.

Anais Over a year ago

@ArleighHix i meant that either option i select, the company don't change it's state to enabled. sorry

Anais Over a year ago

@ShubhamAgrawal added 2 captures

|

Arleigh Hix · Accepted Answer · 2019-06-15 21:07:36Z

1

It does appear to work as-is however, I would like to suggest a more streamlined approach:

function changeState() {
  // this one Boolean comparison is the value you need
  document.getElementById("company").disabled = (document.getElementById("pjsaupf").value == "nu");
}

<select id="pjsaupf" name="pjsaupf" onChange="changeState()">
  <option value="nu">Nu se aplica</option>
  <option value="pfa">Persoana Fizica Autorizata PFA</option>
  <option value="pja">Persoana Juridica Autorizata PJA</option>
</select>

<input type="text" id="company" name="company" class="form-control" placeholder="Companie" disabled>

answered Jun 15, 2019 at 21:07

Arleigh Hix

11k1 gold badge17 silver badges38 bronze badges

3 Comments

Anais Over a year ago

i added 2 captures of my page when i select the options that should change company to enabled in the description of the question

Arleigh Hix Over a year ago

Yes, but they do not help any. Your first javascript works with the html you have shared. There must be some other script running or css that is keeping it disabled. Did you clear your cache and do a hard reload?

Arleigh Hix Over a year ago

The capture does show that you do at least have some styles set on the elements that is not in your post.

Collectives™ on Stack Overflow

Cannot disable text input based on dropdown list selection

2 Answers 2

10 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related