?
Solved

Disable/Enable text field base on check box

Posted on 2000-05-04
11
Medium Priority
?
193 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
Industry Leaders: 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 150 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

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 …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…
Suggested Courses

762 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