473,749 Members | 2,384 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 8868
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
2768
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
6972
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
12190
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
8009
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
14651
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
16757
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
7555
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
1630
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
8991
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
8996
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
8832
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9388
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
9254
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
4608
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
4879
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3319
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2791
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2217
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.