/    Sign up×
Community /Pin to ProfileBookmark

Dynamic Pull Down Menu Calculator

Hi folks, first post here YaY!, anyhow lets get to the question/problem

I have a client who requires a dynamic pull down menu (chained Select Menu) and also requires that it does a basic price estimation based on the selected options from the menus.

I have been toying around with Xin Yang Chained Select Menu(Sample A1) as well as a randomly found javascript calculator(sample A2) i found through google search.

When trying to combine the two the calculator becomes broken. Is it at all possible to do what i am trying to do.

[URL=”http://www.yxscripts.com/cs/chainedselects.html”]Sample A1[/URL]

[CODE]Sample A2
<html>
<head>
<title>Calculate Amount</title>
<script language=”JavaScript”>
function calcAmount(){
var oprice = parseFloat(document.getElementById(“oprice”).value );
var sprices = document.getElementById(“sprice”);
var sprice = parseFloat(sprices[sprices.selectedIndex].value);
var qties = document.getElementById(“qty”);
var qty = parseInt(qties[qties.selectedIndex].value);
var tot = document.getElementById(“tot”);
tot.value = (oprice + sprice) * qty;
}
</script>
</head>
<body>
<h3>Total Amount = (OpenPrice + SetPrice) * Quantity</h3>
<table border=”0″ cellpadding=”2″ cellspacing=”2″>
<tr>
<td>Open Price:</td>
<td><input style=”width:100;text-align:right” type=”text” id=”oprice” value=”0″>$</td>
</tr>
<tr>
<td>Set Price:</td>
<td><select style=”width:100″ id=”sprice”>
<option value=”100″>100 </option>
<option value=”200″>200</option>
<option value=”300″>300</option>
<option value=”400″>400</option>
</select>$
</td>
</tr>
<tr>
<td>Quantity:</td>
<td><select style=”width:100″ id=”qty”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
<option value=”10″>10</option>
<option value=”20″>20</option>
<option value=”100″>100</option>
</select>
</td>
</tr>
<tr>
<td colspan=”2″><hr></td>
</tr>
<tr>
<td><input type=”button” value=”Total Amount” onclick=”calcAmount()”></td>
<td><input style=”width:100;text-align:right” type=”text” value=”0″ id=”tot”>$</td>
</tr>
</table>
</body>
</html>
[/CODE]

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@FangSep 10.2010 — Shouldn't be a problem as long as the select name/id corresponds in both scripts.

Do you have a link to the non-working page?
Copy linkTweet thisAlerts:
@heptasarimOct 21.2011 — Hi folks, first post here YaY!, anyhow lets get to the question/problem

I have a client who requires a dynamic pull down menu (chained Select Menu) and also requires that it does a basic price estimation based on the selected options from the menus.

I have been toying around with Xin Yang Chained Select Menu(Sample A1) as well as a randomly found javascript calculator(sample A2) i found through google search.

When trying to combine the two the calculator becomes broken. Is it at all possible to do what i am trying to do.

Sample A1

[CODE]Sample A2
<html>
<head>
<title>Calculate Amount</title>
<script language="JavaScript">
function calcAmount(){
var oprice = parseFloat(document.getElementById("oprice").value );
var sprices = document.getElementById("sprice");
var sprice = parseFloat(sprices[sprices.selectedIndex].value);
var qties = document.getElementById("qty");
var qty = parseInt(qties[qties.selectedIndex].value);
var tot = document.getElementById("tot");
tot.value = (oprice + sprice) * qty;
}
</script>
</head>
<body>
<h3>Total Amount = (OpenPrice + SetPrice) * Quantity</h3>
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td>Open Price:</td>
<td><input style="width:100;text-align:right" type="text" id="oprice" value="0">$</td>
</tr>
<tr>
<td>Set Price:</td>
<td><select style="width:100" id="sprice">
<option value="100">100 </option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>$
</td>
</tr>
<tr>
<td>Quantity:</td>
<td><select style="width:100" id="qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="100">100</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td><input type="button" value="Total Amount" onclick="calcAmount()"></td>
<td><input style="width:100;text-align:right" type="text" value="0" id="tot">$</td>
</tr>
</table>
</body>
</html>
[/CODE]
[/QUOTE]


About one weeks I was searching this subject. Fortunately I found here ?

But it's not completely thing I want. Nevertheless if you found a clue-solution may you send an email or post here
×

Success!

Help @Taek 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,
)...