...

View Full Version : how to enable & disable a text field in javascript?



therry
07-11-2002, 10:34 AM
Hi,
I 'd like to know how to enable & disable a text field in javascript?
thanks

Zvona
07-11-2002, 11:47 AM
Following example enables / disables submit button. Replace that with textbox :

<!-- 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>

requestcode
07-11-2002, 01:30 PM
Here is another example that works in NS4, IE5+ and NS6.


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

Roy Sinclair
07-11-2002, 09:32 PM
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>

glenngv
07-12-2002, 05:06 AM
simplest version:



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

wildman77
09-14-2005, 08:23 PM
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

vwphillips
09-14-2005, 10:30 PM
<!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>

wildman77
09-15-2005, 03:24 PM
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.

glenngv
09-16-2005, 04:47 AM
<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>

vwphillips
09-16-2005, 07:56 AM
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/FormCompendium/FormCompendium.htm#f40

has greater flexibility than alternatives



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum