Welcome to WebmasterWorld Guest from 54.81.71.68

Forum Moderators: open

Message Too Old, No Replies

radio buttons and onChange handler

     
6:09 pm on May 16, 2005 (gmt 0)

New User

10+ Year Member

joined:May 16, 2005
posts:3
votes: 0


Hey everyone... new to the forum.

This concept is not new, obviously, but it does make for a nice GUI and hopefully I can use Javascript to do it.

I am trying to build a GUI to track vehicles and equipment. They are different in the respect that VEHICLES have license plates, VINs and mileage. EQUIPMENT has model numbers, serial numbers and hours (hours = the number of hours the machine has be operated, just like tractors).

My question is how would I build a form that would start with two options (radio button). The only thing the user would see before a radio button was checked would be:

Type:
( ) Vehicle
( ) Equipment

Then based on what button was checked, the rest of the form would be revealed with the relevant information. I guess the closest, best real-world use of this that I've seen of this is in Gmail.

Thanks a bunch.

6:36 pm on May 16, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 20, 2004
posts:1477
votes: 0


Use the
onclick
event, Luke! ;)
7:56 pm on May 16, 2005 (gmt 0)

New User

10+ Year Member

joined:May 16, 2005
posts:3
votes: 0


Can you give me a simple form so that I can see how it works?
8:11 pm on May 16, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0



[pre]
<html>
<head>
<title>Untitled Form Folly</title>
<style>
fieldset{display: none; padding: 10px;}
</style>
<script type="text/javascript">
function toggleSet(rad)
{
var type = rad.value;
for(var k=0,elm;elm=rad.form.elements[k];k++)
if(elm.className=='item')
elm.style.display = elm.id==type? 'inline':'';
}
</script>
</head>
<body>
<form>
Vehicle
<input type="radio" name="itemtype" value="vehicle" onclick="toggleSet(this)">
<br>
Equipment
<input type="radio" name="itemtype" value="equipment" onclick="toggleSet(this)">
<br>
<fieldset id="vehicle" class="item">
<legend>Vehicle</legend>
license plate <input type="text" name="licence_plate"><br>
VIN <input type="text" name="VIN"><br>
mileage <input type="text" name="mileage">
</fieldset>
<fieldset id="equipment" class="item">
<legend>Equipment</legend>
model no. <input type="text" name="model_no"><br>
serial no. <input type="text" name="serial_no"><br>
hours <input type="text" name="hours">
</fieldset>
</form>

</body>
</html>[/pre]

Or perhaps one that only has one set, but changes the names/values/labels....

8:14 pm on May 16, 2005 (gmt 0)

New User

10+ Year Member

joined:May 16, 2005
posts:3
votes: 0


Slick... that's exactly what I was looking for. Thank you, I appreciate it.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members