473,699 Members | 2,438 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

show or hide fields using a checkbox

there is one check box and if it is checked, then shows several fields
underneath; otherwise, several fields are hidden. the default is
unchecked.

anyone can share the code for this function?

<table>
<tr><td><inpu t type="checkbox" name="vehicle" value="N" /><td></tr>
<tr><td><inpu t type="text" name="color" value="test" /><td></tr>
<tr><td><inpu t type="text" name="shape" value="test" /><td></tr>
</table>

Mar 13 '07 #1
2 8861
TGEAR scribed:
>there is one check box and if it is checked, then shows several fields
underneath; otherwise, several fields are hidden. the default is
unchecked.

anyone can share the code for this function?

<table>
<tr><td><inp ut type="checkbox" name="vehicle" value="N" /><td></tr>
<tr><td><inp ut type="text" name="color" value="test" /><td></tr>
<tr><td><inp ut type="text" name="shape" value="test" /><td></tr>
</table>
One method would be to wrap the form input elements in a div and use
javascript to change the CSS display style:

function toggle(what,tar getId) {
target = document.getEle mentById(target Id);
target.style.di splay = (what.checked)? '':'none';
}
<input type="checkbox" name="vehicle" value="N"
onClick="toggle (this,'divtocha nge');"/>

<div id="divtochange " style="display: none;">
<input type="text" name="color" value="test" />
<input type="text" name="shape" value="test" />
</div>
--
Ed Jay (remove 'M' to respond by email)
Mar 13 '07 #2
TGEAR wrote:
>here is one check box and if it is checked, then shows several fields
underneath; otherwise, several fields are hidden. the default is
unchecked.

anyone can share the code for this function?
Personally, I favour the approach of using CSS, with nested containers
with their own classes. Just changing the class (className in
Javascript) of the parent container can completely control what child
elements are visible, based on their class or id.
><table>
<tr><td><inp ut type="checkbox" name="vehicle" value="N" /><td></tr>
<tr><td><inp ut type="text" name="color" value="test" /><td></tr>
<tr><td><inp ut type="text" name="shape" value="test" /><td></tr>
</table>
You can use the onchange or onclick event of one of the checkboxes, and
change the class of the table, for example. The showing/hiding logic is
then completely handled by CSS, while the script logic is reduced to as
little as possible.

I'm just making this up as we go along:

<style type="text/css">
#parentTable.ve hicleOn .showOff, #parentTable.ve hicleOff .showOn {
display: none;
}
</style>
<table id="parentTable " class="vehicleO ff">
<tr><td><inpu t type="checkbox" name="vehicle" value="N"
onclick="docume nt.getElementBy Id('parentTable ').className = this.checked
? 'vehicleOn' : 'VehicleOff'"/></td></tr>
<tr class="showOn"> <td><input type="text" name="color" value="color
test" /></
td></tr>
<tr class="showOff" ><td><input type="text" name="shape" value="shape
test" /></td></tr>
</table>

You can pull the code out of the onclick even and make it a function to
call.

--
Bart.
Mar 13 '07 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
2766
by: sergio | last post by:
Hi all, I have created the following script that will show/hide a menu based on checkboxes. It works fine in Opera but not on IE6! Does anybody knows a workaround this problem? Thanks for your response. Sergio ------------------------------------------------ <script language="JavaScript" type="text/javascript">
1
6970
by: DettCom | last post by:
Hello all, I saw this post on google that contained the following code and I tried it but it did not work. I am trying create two contact forms and it the info in the first form is the same contact info that would be on the second, the enduser can check a box to hide all of the addtional fields. Below if the original code.
2
12185
by: MOHSEN KASHANI | last post by:
Hi, I am trying to hide some form elements in a form by default and show/hide depending on which radio button is clicked. This is what I have but it is not working: <head> <style> ..noshow { display: none; }
4
8004
by: jerryyang_la1 | last post by:
I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers) document.layers.visibility = 'visible'; else if (document.all) { document.all.style.visibility = 'visible';
2
14642
by: UJ | last post by:
Is there a way with a asp:checkbox to run a JavaScript to display/hide text/input on the screen without doing a postback? I also need to be able to access the stuff at the server so I need to have run=server with it. TIA - Jeff.
1
16752
by: asilverpeach | last post by:
Hey Guys! Found some great scripts here on this topic but have to make to changes to the code that I can't seem to figure out. First, In the following code clicking on the headers shows the div information. I want a nested show hide element though. So when you click on "Do you have carpets to be cleaned?" Small Rooms & Medium Rooms appears (that I got working) But Then when you click on Small rooms or medium rooms i want the three lines...
13
7551
by: rupak | last post by:
Hi! I have a multiple selection of checkboxes <input type='checkbox' name='coffee' id='col1' value='Address'/> <input type='checkbox' name='coffee' id='col2' value='Name'/> <input type='checkbox' name='coffee' id='col3' value='ID'/> <input type='checkbox' name='coffee' id='col4' value='UserName'/> <input type='checkbox' name='coffee' id='col5' value='Code'/>
1
1624
by: filch | last post by:
Hi, I am new to this forum ... so hello to all! I am trying to get a script working which will show or hide a table based on a user checking or unchecking a parent checkbox. This is the script I have come up with so far (note that one of my issues is whether or not you can use an if/else construct inside of a case statement): function showIt($id) { alert("ID is : $id"); switch ($id) {
0
8984
Frinavale
by: Frinavale | last post by:
This code snippet is just a little bit of fun. It demonstrates how you use JavaScript and CSS to show or hide columns in a table depending on whether or not a checkbox corresponding with the column is checked. <html> <head> <script type="text/javascript"> function ShowHideField(header, gridID, checkboxElement) { var theGrid = document.getElementById(gridID); var displayValue;
0
8705
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9199
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9054
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
7785
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5884
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4391
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4637
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2362
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2016
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.