Solved

Disable/Enable text field base on check box

Posted on 2000-05-04
11
190 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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Conformation code 4 35
Error Handler 8 40
Change background images after 5 seconds. 12 46
What is the valid CSS Selector Chain for this situation? 3 18
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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

737 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