PDA

View Full Version : DHTML Effect...



CasperTalos
02-20-2007, 03:56 PM
I'm trying to figure out how to use a drop-down box effect so when the user selects something in that drop-down box, a series of text boxes appears under it, asking the user for more data. Any way to do that??

jscheuer1
02-20-2007, 04:14 PM
You could use the select's onchange event to determine which other content to reveal.

ilensoft
02-20-2007, 04:15 PM
yes there is. You can do this by writing a function to get this done. Here is how the function works. The function is able to get which item of the select drop down box is clicked. Beging able to do that, you can tell the function to write a html code to a div element that could already have been put their. Make sure the div element is having an "id" or "name" attribute so that you can make reference to that HTML object and alter its innerHTML.

jscheuer1
02-20-2007, 04:26 PM
See also:

http://www.dynamicdrive.com/dynamicindex16/formdependency.htm

CasperTalos
02-20-2007, 05:22 PM
yes there is. You can do this by writing a function to get this done. Here is how the function works. The function is able to get which item of the select drop down box is clicked. Beging able to do that, you can tell the function to write a html code to a div element that could already have been put their. Make sure the div element is having an "id" or "name" attribute so that you can make reference to that HTML object and alter its innerHTML.

This seems to be a start...

http://www.pageresource.com/jscript/jdrop2.htm

I just need to figure out how to make it to work for my job page

http://www.deaf-interpreter.com/request2.php

once bill-me is selected, the billing information appears

or once credit card is selected, the appropriate boxes would appear.

Any Advice?

jscheuer1
02-20-2007, 06:28 PM
http://www.dynamicdrive.com/dynamicindex16/formdependency.htm

CasperTalos
02-20-2007, 10:21 PM
I see radio boxes and check boxes, I just am not sure how to do this with a drop-down box...

mburt
02-20-2007, 10:40 PM
Twey's script does do that... but it may seem a little complicated. Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function selectBox(el) {
var d_el = document.getElementById(el);
document.getElementById("mainarea").innerHTML=d_el.innerHTML;
}
</script>
</head>
<body>
<select onchange="selectBox(options[selectedIndex].value);">
<option selected value="default">Default Option</option>
<option value="content1">Option 1</option>
<option value="mycontent2">Option 1</option>
</select>

<div id="default" style="display:none">
<br>default content
</div>

<div id="content1" style="display:none">
<input type="text">
<br><input type="text">
<br><input type="radio" name="test">Item 1
<br><input type="radio" name="test">Item 2
</div>

<div id="mycontent2" style="display:none">
Blah blah ... you get the picture
</div>

<div id="mainarea"></div>
</body>
</html>

Set the "value" of your option to your targeted content:

<option value="mycontentname">option</option>
and make sure the content actually exists:

<div id="mycontentname"...

CasperTalos
02-21-2007, 05:21 PM
Looks Promising, I'll give it a try and get back on ya'll with this once I figure this out. :-D