How to disable fields in html using javascript

Question

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;
    };

What did you mean with "disabling the other fields"? Do mean these are not editable? — Reporter
– Reporter, Commented Oct 9, 2013 at 8:38

mondjunge · Accepted Answer · 2013-10-09 10:20:57Z

1

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.

edited Oct 9, 2013 at 10:20

answered Oct 9, 2013 at 8:41

mondjunge

1,24714 silver badges24 bronze badges

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

2 Comments

Inventor Over a year ago

what do i put in the onchange()??

mondjunge Over a year ago

You should not use "onchange()" or similar attributes in HTML. The point in the above javascript is, that you fetch your element and give it an onchange function. If your code is not working, be sure to put the javascript on the end of body or it will not find element "reg", becasue it is loaded in body.

Abhitalks · Accepted Answer · 2013-10-09 08:34:50Z

0

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";

answered Oct 9, 2013 at 8:34

Abhitalks

28.5k6 gold badges61 silver badges82 bronze badges

2 Comments

mondjunge Over a year ago

Why don't you pass the element to disableFields, when you already got it and instead get it by Id in the function?

Abhitalks Over a year ago

@mondjunge Yes you are right. this is the way to go. But, please note that I simply pointed out where he was going wrong. He should not expect readymade code supplied by others. He would be better of by taking hints.

Parth Mehta · Accepted Answer · 2013-10-09 09:32:53Z

0

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>

edited Oct 9, 2013 at 9:32

answered Oct 9, 2013 at 8:48

Parth Mehta

871 silver badge7 bronze badges

1 Comment

mondjunge Over a year ago

It cannot work, because value of reg is "Male" or "Female", but never "Participant" ;)

Ajith S · Accepted Answer · 2013-10-09 10:01:17Z

0

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>

edited Oct 9, 2013 at 10:01

answered Oct 9, 2013 at 8:55

Ajith S

2,9172 gold badges20 silver badges30 bronze badges

2 Comments

Inventor Over a year ago

this hasn't worked also function disableField() { var val = document.getElementById("regtype").value; if(val === 'part') { document.getElementById("org").disabled = true; document.getElementById("dept").disabled = true; } else { document.getElementById("org").disabled = false; document.getElementById("dept").disabled = false; } }

Inventor Over a year ago

thank you very much your logic worked but not this code but the reason behind it

Vinay Pratap Singh Bhadauria · Accepted Answer · 2013-10-09 10:28:56Z

0

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; 
     }
    }

edited Oct 9, 2013 at 10:28

answered Oct 9, 2013 at 8:42

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

3 Comments

mondjunge Over a year ago

Why don't you pass the element but instead get it from dom? It's bad style.

Vinay Pratap Singh Bhadauria Over a year ago

@mondjunge Changed it for you. :)

mondjunge Over a year ago

@Rex: thx, I just wanted to point this out, because everyone seems to do it. In fact I even think onchange attributes are a bad habbit and shpould not be used. But I am a jQuery fan, what else should I say.. ;)

Collectives™ on Stack Overflow

How to disable fields in html using javascript

5 Answers 5

2 Comments

2 Comments

1 Comment

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related