[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 197
  • Last Modified:

Disable/Enable text field base on check box

I want to load a page with a checkbox followed by  several textboxes.  Initially, I want the checkbox to be unchecked and the testboxes to be disabled.  When the user checks the checkbox, the textboxes need to be enabled...and vice versa.

Thanks,
jpetro7
0
jpetro7
Asked:
jpetro7
  • 4
  • 4
  • 3
1 Solution
 
xabiCommented:
Here goes the code:

---- 8< ------ 8< ---------
<html>
<head>
<title>Example</title>
<script language="javascript">
<!--
var enabled = false
function swapit(o) {
  if (o.checked) enabled = true
  else enabled = false
}
function disableit() {
  document.formulario.state.value="Disabled"
  enabled = false
}
function dofocus(o) {
  if (!enabled) o.blur()
  return false
}
//-->
</script>
</head>
<body>
<form name="formulario">
  <input name="text1" type="text" value="Example1" onfocus="dofocus(this)"><br>
  <input name="text2" type="text" value="Example2" onfocus="dofocus(this)"><br>
  <input name="text3" type="text" value="Example3" onfocus="dofocus(this)"><br>
  Enabled <input type="checkbox" onclick="swapit(this)">
</form>
</body>
</html>
--------- 8< ------- 8< ------

xabi
0
 
xabiCommented:
Even better:

------- 8< --------- 8< --------
<html>
<head>
<title>Example</title>
<script language="javascript">
<!--
var enabled = false
//-->
</script>
</head>
<body>
<form name="formulario">
  <input name="text1" type="text" value="Example1" onfocus="if (!enabled) this.blur()"><br>
  <input name="text2" type="text" value="Example2" onfocus="if (!enabled) this.blur()"><br>
  <input name="text3" type="text" value="Example3" onfocus="if (!enabled) this.blur()"><br>
  Enabled <input type="checkbox" onclick="enabled = this.checked">
</form>
</body>
</html>
---------- 8< ------ 8< ------

xabi
0
 
jpetro7Author Commented:
xabi,

I tried to use both pieces of your code and I'm having no luck...am I forgetting to do something?

-jpetro7
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
jpetro7Author Commented:
If you can tell me how to make your answer work, the points are yours.
0
 
xabiCommented:
cut the code from <html> to </html> and save it as "foo.thm" then open this file in your broser. It works on IE and NN. I tryied it. Don't cut the " --- 8< ------ ...." lines

xabi
0
 
jpetro7Author Commented:
Your script works...however, I want to gray out the disabled textboxes..

Please let me know,

Thanks,
jpetro7
0
 
poohbear_68Commented:
How about this??

<html>
<head>
<title>Example</title>
<script language="javascript">
<!--
//var enabled = false
function UpdateState() {
  document.forms["formulario"].text1.disabled = !document.forms[0].Checkbox1.checked;
  document.forms["formulario"].text2.disabled = !document.forms[0].Checkbox1.checked;
  document.forms["formulario"].text3.disabled = !document.forms[0].Checkbox1.checked;
}
//-->
</script>
</head>

<body onload="UpdateState();">
<form name="formulario">
  <input name="text1" type="text" value="Example1" size="20"><br>
  <input name="text2" type="text" value="Example2" size="20"><br>
  <input name="text3" type="text" value="Example3" size="20"><br>
  Enabled <input type="checkbox" onclick="UpdateState()" value="ON" name="Checkbox1" checked>
</form>
</body>
</html>
0
 
poohbear_68Commented:
To make that the checkbox isn't checked, change the following line:
  Enabled <input type="checkbox" onclick="UpdateState()" value="ON" name="Checkbox1" checked>
to
  Enabled <input type="checkbox" onclick="UpdateState()" name="Checkbox1" checked>
0
 
poohbear_68Commented:
Oops.  I didn't notice that this question was being deleted.
0
 
xabiCommented:
I didn't give you an answer to gray the textboxes cuase Netscape can Gray the textboxes, it was just only a compatibility reaseon.

xabi
0
 
jpetro7Author Commented:
Thanks!

-jpetro7
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 4
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now