Solved

Disable/Enable text field base on check box

Posted on 2000-05-04
11
186 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
  • 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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now