CODEWITHSUNDEEP
javascripthtml
Inventor
Inventor

Reputation: 505

How to disable fields in html using javascript

My code isn't disabling the other fields. please help i am trying to select either a participant or exhibitor.once the participant is selected the other fields must be disable.

the Html

 <label> <span>Test:</span>
    <select  id="reg" name="reg" onkeyup="disableField()">
      <option value="" selected="selected" >Select Your Registration type  </option> 
      <option value="Male">Participant</option>
     <option value="Female">Exhibitor</option>
    </select>                                   
 </label>


<label> <span>test 1 field:</span>
   <input type="text"  name="test1" id="test1"/>
   </label>
   <label> <span>test field 2:</span>
   <input type="text"  name="test2" id="test2"/>
</label>

the javascript

   var disableField = function () {
   var state = document.getElementById("reg").value === "Participant";
    document.getElementById("test1").disabled = state;
    document.getElementById("test2").disabled = state;
    };

Upvotes: 2

Views: 3551

Answers (5)

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

Add an on change in the select list 

<select  id="reg" name="reg" onchange="SelectedIndexChanged(this)">

function SelectedIndexChanged(e){
    var selectedValue= e.value;
    //if Participant is selected
     if(selectedValue == "Participant "){
      document.getElementById("test1").disabled = true; 
      document.getElementById("test2").disabled = true; 
     }
    }

Upvotes: 0

mondjunge
mondjunge

Reputation: 1239

Do not use inline javascript. It makes your code messy and not reusable.

[Edit] This is a working example for you:

<html>
   <head> <title></title></head>
   <body>
     <label> <span>Test:</span>
        <select  id="reg" name="reg">
          <option value="" selected="selected" >Select Your Registration type  </option> 
          <option value="Male">Participant</option>
         <option value="Female">Exhibitor</option>
        </select>                                   
     </label>

    <label> <span>test 1 field:</span>
       <input type="text"  name="test1" id="test1"/>
       </label>
       <label> <span>test field 2:</span>
       <input type="text"  name="test2" id="test2"/>
    </label>
   <script type="text/javascript">
//<!--
   var obj = document.getElementById("reg");
   obj.onchange = function(event){
     if(this.value=="Male"){
        document.getElementById("test1").disabled = 'disabled';
        document.getElementById("test2").disabled = 'disabled';
     }else{
        document.getElementById("test1").disabled = '';
        document.getElementById("test2").disabled = '';
     }
   }
   //--></script>
   </body>
</html>

[/edit]

Have fun and may the source be with you.

Upvotes: 1

Ajith S
Ajith S

Reputation: 2917

Try this,

<label> <span>Test:</span>
    <select  id="reg" name="reg" onchange="disableField();">
      <option value="" selected="selected" >Select Your Registration type  </option> 
      <option value="Male">Participant</option>
     <option value="Female">Exhibitor</option>
    </select>                                   
 </label>


<label> <span>test 1 field:</span>
   <input type="text"  name="test1" id="test1"/>
   </label>
   <label> <span>test field 2:</span>
   <input type="text"  name="test2" id="test2"/>
</label>

JS

function disableField() {
    var val = document.getElementById("reg").value;
    if(val == 'Male') {
        document.getElementById("test1").disabled = true; 
        document.getElementById("test2").disabled = true; 
    } else {
        document.getElementById("test1").disabled = false; 
        document.getElementById("test2").disabled = false; 
    }
}

Check value for Male not Participant

Here is the working code,

<html>
    <head>
        <script>
            function disableField() {
                alert('jdhsfg')
                var val = document.getElementById("reg").value;
                if(val == 'Male') {
                    document.getElementById("test1").disabled = true; 
                    document.getElementById("test2").disabled = true; 
                } else {
                    document.getElementById("test1").disabled = false; 
                    document.getElementById("test2").disabled = false; 
                }
            }
        </script>
    </head>

    <body>
        <label> <span>Test:</span>
            <select  id="reg" name="reg" onchange="disableField();">
                <option value="" selected="selected" >Select Your Registration type  </option> 
                <option value="Male">Participant</option>
                <option value="Female">Exhibitor</option>
            </select>                                   
        </label>


        <label> <span>test 1 field:</span>
            <input type="text"  name="test1" id="test1"/>
        </label>
        <label> <span>test field 2:</span>
            <input type="text"  name="test2" id="test2"/>
        </label>

    </body>
</html>

Upvotes: 0

Parth Mehta
Parth Mehta

Reputation: 87

try this ....it is working

<script type="text/javascript">

    function disableField() {
        var state = document.getElementById("reg").value === "Participant";
        if (state == false) {
            document.getElementById("test1").style.visibility = "hidden";
            document.getElementById("test2").style.visibility = "hidden";
        }
    };
</script>

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28437

Firstly, use onchange:

<select  id="reg" name="reg" onchange="disableField()">

Secondly:

Your option values are 'male' and 'female'. So use that to compare:

var state = document.getElementById("reg").value == "Male";

Upvotes: 0

Related Questions