/    Sign up×
Community /Pin to ProfileBookmark

Help with DHTML Form Effects

Copy linkTweet thisAlerts:
May 24.2004

Hi all,

I’m having trouble creating a specific effect that I need for a page I have created with forms. I’m guessing that some DHTML wizard out there could crank this baby out in a matter of minutes, but my knowledge of DHTML is extremely limited.

Here’s what needs to be done:

I have a drop-down menu. Once the user selects an option, I need a script that can interpret the value (in this case, the price) of the selected option, and display two columns of radio buttons.

The first column of radio buttons will always have two static values, so the script merely has to make this column visible. The second column will have one radio button with a value that has to be determined dynamically based on the selected price above.

Can anyone offer up any advice or point me to some examples of this?

Any help would be greatly appreciated!

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangMay 25.2004 — Something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Show radios on selection</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
<!--
label {display:block;}
#radios {display:none;}
#radios div {float:left; width:10em;}
-->
</style>

</head>
<body>
<form action="#" name="myform">
<div>
<span>Make a selection:</span>
<select name="cost" onchange="document.getElementById('radios').style.display='block';document.getElementById('p1').value=this.value;alert(document.body.innerHTML);">
<option value="0">Select</option>
<option value="1">$1</option>
<option value="2">$2</option>
<option value="3">$3</option>
</select>
</div>
<div id="radios">
<div>
<label for="f1">fixed1:<input type="radio" id="f1" name="fixed" value="1" /></label>
<label for="f2">fixed2:<input type="radio" id="f2" name="fixed" value="2" /></label>
</div>
<div>
<label for="p1">price:<input type="radio" id="p1" name="price" value="0" /></label>
</div>
</div>
</form>
</body>
</html>

The [I]alert[/I] shows that the value of 'price' has changed.
Copy linkTweet thisAlerts:
@tjh205authorMay 25.2004 — Fang,

Thanks a bunch, that code is pretty much exactly what I'm looking for.

One other small question... Is it possible to tweak the code so that only ONE of the three radio buttons can be selected? I know it is, but for some reason I cannot remember how...???
Copy linkTweet thisAlerts:
@FangMay 25.2004 — Give the radio buttons the same [I]name[/I]. They are then all part of one group.
×

Success!

Help @tjh205 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...