CODEWITHSUNDEEP
javascripthtmlforms
Anais
Anais

Reputation: 627

Cannot disable text input based on dropdown list selection

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

enter image description here

enter image description here

Upvotes: 0

Views: 33

Answers (2)

Arleigh Hix
Arleigh Hix

Reputation: 10877

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>

Upvotes: 1

Shubham Agrawal
Shubham Agrawal

Reputation: 182

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>

Upvotes: 1

Related Questions