SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript - disable input problem

    Hi Guys,

    I'm trying to disable input fields by clicking a radio button, however I cannot get this to work, can anyone help?

    Thankyou


    HTML Code:
    <script type="text/javascript">
    
    function toggleVisibility(controlId)
    
    {
    
    var control = document.getElementById(controlId);
    
    if(control.disabled == true){
    control.disabled == false;
    }
    else{
    control.disabled == true;
    }
    
    
    }
    
    </script>
    <input type="radio" name="type" id="ft" value="ft"  onclick="toggleVisibility('r1');" />
          
    <input type="radio" name="type" id="pt" value="pt" onclick="toggleVisibility('r1');" />
     
     <input type="text"  name="coursecode" id="r1" size="25" maxlength="100"  value=""  >

  2. #2
    SitePoint Enthusiast PicklePete's Avatar
    Join Date
    Apr 2008
    Location
    England
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem was that you're mixing up "=" and "==".

    '=' lets you assign a value to a variable, whereas '==' is a comparison, to see if two values are the same.

    This will work: (keep in mind that that if you click one of the radio buttons twice, it'll still disabled then re-enable. You could fix this by having a disable function, and an enable function).

    Code:
    <script type="text/javascript">
    	function toggleVisibility(controlId) {
    		var control = document.getElementById(controlId);
    				
    		if(control.disabled == true) {
    			control.disabled = false;
    		}
    		else {
    			control.disabled = true;
    		}
    	}
    </script>

  3. #3
    SitePoint Enthusiast Syam's Avatar
    Join Date
    Mar 2006
    Location
    Kochi, India
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if(control.disabled == true){
    control.disabled = false;
    }
    else{
    control.disabled = true;
    }

    Edit: Late...

  4. #4
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah of course thanks fellas!

    It works great for a single input field, however, I need to disable various inputs, can I pass a list of ID's to a javascript function as a list? Then loop through them to hide them?

    Thanks again

  5. #5
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would something similar to this work?:

    HTML Code:
    <script type="text/javascript">
    
    function toggleShow(controlId)
    {
    for(i=0; i< controlId.length; i++)
    	{
    var getid = "r" + i; 
    var control = document.getElementById('getid');
    control.disabled = true;
    	}
    }
    
    
    function toggleHide(controlId)
    {
    for(i=0; i< controlId.length; i++)
    	{
    var getid = "r" + i; 
    var control = document.getElementById('getid');
    control.disabled = false;
    	}
    }
    </script>
      <input type="radio" name="type" id="ft" value="ft"  onclick="toggleShow('r1,r2,r3,r4,r5,r6,r7,r8,r9,r10,r11,r12,r12,r14');" />
    
    <input type="radio" name="type" id="pt" value="pt" onclick="toggleHide('r1,r2,r3,r4,r5,r6,r7,r8,r9,r10,r11,r12,r12,r14');" />

  6. #6
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, try this

    PHP Code:
    <html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <
    script type="text/javascript">

    function 
    toggleShow(){
        var 
    lenarguments.length;
        for (var 
    0;i<len;i++){
            var 
    getidarguments[i];
            var 
    control document.getElementById(getid);
            
    control.disabled false;
        }
    }
    function 
    toggleHide(){
        var 
    lenarguments.length;
        for (var 
    0;i<len;i++){
            var 
    getidarguments[i];
            var 
    control document.getElementById(getid);
            
    control.disabled true;
        }
    }
    </script>

    </head>

    <body>
    <form>
    <p>Show
    <input type="radio" name="type" id="ft" value="ft"  onclick="toggleShow('r1','r2','r3','r4','r5');" />
    </p>
    <p>Hide
    <input type="radio" name="type" id="pt" value="pt" onclick="toggleHide('r1','r2','r3','r4','r5');" />
    </p>
    <input name="r1"   id="r1" type="button" value="r1" onClick="alert('r1')">
    <input name="r2" id="r2" type="button" value="r2" onClick="alert('r2')">
    <input name="r3" id="r3" type="button" value="r3" onClick="alert('r3')">
    <input name="r4" id="r4" type="button" value="r4" onClick="alert('r4')">
    <input name="r5" id="r5" type="button" value="r5" onClick="alert('r5')">
    </form>
    </body>
    </html> 
    Bye.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •