Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jun 2002
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to enable & disable a text field in javascript?

    Hi,
    I 'd like to know how to enable & disable a text field in javascript?
    thanks

  • #2
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post
    Following example enables / disables submit button. Replace that with textbox :
    Code:
    <!-- Example Written by Zvona -->
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<title></title>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1;" />
     	</head>
    
    	<body>
    		<form action="">
    			<input type="checkbox" onclick="this.form.btnSubmit.disabled = !this.checked;">
    				Check this in order to submit
    			<br /><br />
    			<input name="btnSubmit" type="submit" value="Submit" disabled="disabled" />
    		</form>
    	</body>
    </html>
    Zvona
    First Aid for
    Web Design

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is another example that works in NS4, IE5+ and NS6.
    Code:
    <html>
    <head>
    <title>Disable Text Box</title>
         <SCRIPT LANGUAGE="JavaScript">
                   function DisBox() 
                       {
                        if(document.Distbox.disb.checked)
                          {
                           document.Distbox.txta.blur()     
                           document.Distbox.txta.disabled=true                  
                          }
                       else
                          {
                           document.Distbox.txta.disabled=false
                          }
                       }   
           </SCRIPT>
    </head>
    <body bgcolor="lightgreen">
     <CENTER>
      <FORM NAME="Distbox">
            <BR><BR><BR><BR>
             Check here to disable text box: <INPUT TYPE="checkbox" NAME="disb" onClick="DisBox()"> 
             <INPUT TYPE="text" NAME="txta" SIZE="30" onFocus="DisBox()">
      </FORM>
      </CENTER>
    </body>
    </html>

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's a more generic set of functions set in an example page (this one also supports obsolete browsers like Netscape 4).

    <html>
    <head>
    <script>
    function disableField(myField)
    {
    myField.disabled = true
    return true
    }
    function enableField(myField)
    {
    myField.disabled = false
    return true
    }
    function onfocusField(myField)
    {
    if (myField.disabled)
    {
    myField.blur()
    return false
    }
    return true;
    }
    // The above functions are generic, the following function is specific to this page
    function toggleFields(myField)
    {
    if (myField.checked)
    {
    disableField(document.forms["example1"].text1)
    disableField(document.forms["example1"].checkbox1)
    disableField(document.forms["example1"].select1)
    }
    else
    {
    enableField(document.forms["example1"].text1)
    enableField(document.forms["example1"].checkbox1)
    enableField(document.forms["example1"].select1)
    }
    document.forms["example1"].text1
    }
    </script>
    </head>
    <body>
    <form name="example1">
    Disable Fields: <input type="checkbox" name="control1" onclick="toggleFields(this)" checked="checked">
    <br>
    Text Field: <input type="text" name="text1" onfocus="return onfocusField(this)">
    <br>
    Check box: <input type="checkbox" name="checkbox1" onfocus="return onfocusField(this)" onclick="return onfocusField(this)">
    <br>
    Select: <select name="select1" onfocus="return onfocusField(this)">
    <option></option>
    </select>
    </form>
    <script>
    disableField(document.forms["example1"].text1)
    disableField(document.forms["example1"].checkbox1)
    disableField(document.forms["example1"].select1)
    </script>
    </body>
    </html>

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    simplest version:

    Code:
    <html>
    <head>
    <script>
    function enableDisable(){
    		var disable = true;
    		var arglen = arguments.length;
    		var startIndex = 0;
    		var frm = document.example1;//change appropriate form name
    		if (arglen>0){
    			if (typeof arguments[0]=="boolean") {
    				disable=arguments[0];
    				if (arglen>1) startIndex=1;
    			}
    			for (var i=startIndex;i<arglen;i++){
    				obj = eval("frm."+arguments[i]);
    				if (typeof obj=="object"){
    					if (document.layers) {
    						if (disable){
    							obj.onfocus=new Function("this.blur()");
    							if (obj.type=="text") obj.onchange=new Function("this.value=this.defaultValue");
    						}
    						else {
    							obj.onfocus=new Function("return");
    							if (obj.type=="text") obj.onchange=new Function("return");
    						}
    					}
    					else obj.disabled=disable;
    				}
    			}
    		}
    	}
    </script>
    </head>
    <body>
    <form name="example1">
    Disable Fields: <input type="checkbox" name="control1" onclick="enableDisable(this.checked,'text1','checkbox1','select1')">
    <br>
    Text Field: <input type="text" name="text1">
    <br>
    Check box: <input type="checkbox" name="checkbox1">
    <br>
    Select: <select name="select1">
    <option></option>
    </select>
    </form>
    </body>
    </html>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #6
    New to the CF scene
    Join Date
    Sep 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh

    I like glenngv's option the best, I just need it to be the opposite... I need it to default disabled, and then when you click the check box, it enables the field. Is there a simple way to modify a few lines of this existing code to make that work, or is it a totally different script?

    thanks guys!
    Dave

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    function Disable(obj,state){
     clds=obj.parentNode.childNodes;
     if (!obj.ary){
      obj.ary=new Array();
      for (i1=0;i1<clds.length;i1++){
       if (clds[i1].tagName=='INPUT'||clds[i1].tagName=='SELECT'||clds[i1].tagName=='TEXTAREA'){
        obj.ary[obj.ary.length]=clds[i1];
       }
      }
     }
     for (i=0;i<obj.ary.length;i++){
      obj.ary[i].removeAttribute('disabled');
     }
     if (obj.checked==state){
      for (i1=0;i1<obj.ary.length;i1++){
        obj.ary[i1].setAttribute('disabled','disabled');
      }
     }
     obj.removeAttribute('disabled');
    }
    
    //-->
    </script>
    
    </head>
    
    <body>
    <span >
    <input type="checkbox" name="" disabled="disabled" >
    <input type="text" name="" disabled="disabled" >
    <select disabled="disabled" ><option>Select</option></select>
    <input type="checkbox" name="" onclick="Disable(this,false);" > Disable/Enable
    </span>
    <br>
    <span >
    <input type="checkbox" name=""  >
    <input type="text" name=""  >
    <select ><option>Select</option></select>
    <input type="checkbox" name="" onclick="Disable(this,true);" > Disable/Enable
    </span>
    
    <br>
    <br>
    
    </body>
    
    </html>

  • #8
    New to the CF scene
    Join Date
    Sep 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for your help, Vic.

    too bad it seems limited to being in the same line. If you place any of the fields in table cells away from the checkbox that will enable them, I can't get it to work. So I just added "!" to one of the lines of Glen's code and now his does the opposite, so it works the best for me at this point.

    My only issue with Glen's option now is getting it to work for multiple forms within one page. I can't figure out where in the script to add multiple form names so that each form has it's own enable/disable checkbox feature.
    Last edited by wildman77; 09-15-2005 at 04:45 PM.

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function enableDisable(oChk){
    		var disable = !oChk.checked;
    		var arglen = arguments.length;
    		var obj, startIndex = 1;
    		var frm = oChk.form;
    		for (var i=startIndex;i<arglen;i++){
    			obj = frm.elements[arguments[i]];
    			if (typeof obj=="object"){
    				if (document.layers) {
    					if (disable){
    						obj.onfocus=new Function("this.blur()");
    						if (obj.type=="text") obj.onchange=new Function("this.value=this.defaultValue");
    					}
    					else {
    						obj.onfocus=new Function("return");
    						if (obj.type=="text") obj.onchange=new Function("return");
    					}
    				}
    				else obj.disabled=disable;
    			}
    		}
    	}
    </script>
    </head>
    <body>
    <form name="example1">
    Enable/Disable Fields: <input type="checkbox" name="control1" onclick="enableDisable(this,'text1','checkbox1','select1')" />
    <br />
    Text Field: <input type="text" name="text1" disabled="disabled" />
    <br />
    Check box: <input type="checkbox" name="checkbox1" disabled="disabled" />
    <br />
    Select: <select name="select1" disabled="disabled" />
    <option>option1</option>
    </select>
    </form>
    <form name="example2">
    Enable/Disable Fields: <input type="checkbox" name="control2" onclick="enableDisable(this,'text2','checkbox2','select2')" />
    <br />
    Text Field: <input type="text" name="text2" disabled="disabled" />
    <br />
    Check box: <input type="checkbox" name="checkbox2" disabled="disabled" />
    <br />
    Select: <select name="select2" disabled="disabled" />
    <option>option1</option>
    </select>
    </form>
    </body>
    </html>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    the script I posted has been slightly updated to cope with loacal, global and nested applications. The original was a 5 min 'in concept'

    see http://www.vicsjavascripts.org.uk/Fo...endium.htm#f40

    has greater flexibility than alternatives
    Last edited by vwphillips; 09-16-2005 at 09:02 AM.


  •  

    LinkBacks (?)


    Posting Permissions

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