Solved

Disable/Enable text field base on check box

Posted on 2000-05-04
11
189 Views
Last Modified: 2011-10-03
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
Comment
Question by:jpetro7
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 3
11 Comments
 
LVL 8

Expert Comment

by:xabi
ID: 2777439
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
 
LVL 8

Expert Comment

by:xabi
ID: 2777456
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
 

Author Comment

by:jpetro7
ID: 2777538
xabi,

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

-jpetro7
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jpetro7
ID: 2777575
If you can tell me how to make your answer work, the points are yours.
0
 
LVL 8

Expert Comment

by:xabi
ID: 2777616
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
 

Author Comment

by:jpetro7
ID: 2777634
Your script works...however, I want to gray out the disabled textboxes..

Please let me know,

Thanks,
jpetro7
0
 
LVL 1

Expert Comment

by:poohbear_68
ID: 2778650
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
 
LVL 1

Expert Comment

by:poohbear_68
ID: 2778664
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
 
LVL 1

Expert Comment

by:poohbear_68
ID: 2778671
Oops.  I didn't notice that this question was being deleted.
0
 
LVL 8

Accepted Solution

by:
xabi earned 50 total points
ID: 2779686
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
 

Author Comment

by:jpetro7
ID: 2780747
Thanks!

-jpetro7
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question