PDA

Click to See Complete Forum and Search --> : Help with drop down box

Jenuine
05-23-2003, 11:21 AM
I'm working with a drop down list box. I'm wondering if there's a way to automatically display a price in a text box if a certain item is selected from the drop down box. I'm just now attempting to learn JavaScript, and I'm completely lost. :confused:
Jona
05-23-2003, 11:30 AM
<html><head><title></title>
<script type="text/javascript">
<!--
function updateOptions(price){document.f.tPrice.value=price;}
//-->
</script></head>
<body>
<form action="" name="f"><div>
<select name="sel" onChange="updateOptions(this.options[this.selectedIndex].value);">
<option value="$0" selected>Choose one:</option>
<option value="$10">$10 USD</option>
<option value="$20">$20 USD</option>
<option value="$30">$30 USD</option>
</select>
<input type="text" name="tPrice">
</div></form></body></html>
Jenuine
05-23-2003, 11:44 AM
I guess I'm really confused now. I was thinking that I would have to include an "if then" statement. (i.e. if option is selected from dropdown box, then price would be displayed in text box).

This is what I'm working on. http://www.graffshoeservice.com/Repair%20Form.htm

My problem is with the lower portion of the form with the repair type and price each columns.
khalidali63
05-23-2003, 11:58 AM
In that case,you will need to make sure that
if(selectionbox one has a value
&& selectionbox2 has a value){
update the text field.
}
Jona
05-23-2003, 12:00 PM
Oh, I see. You're using multiple select boxes. OK, then you would use an if/else statement.

Note: Untested code


<html><head>
<script type="text/javascript">
<!--
function updatePrice(f){
var times = (f.sel1.options[f.sel1.options.selectedIndex].value== -1) ? null : f.sel1.options[f.sel1.options.selectedIndex].value;
var price = (f.sel2.options[f.sel2.options.selectedIndex].value== -1) ? 0 : f.sel2.options[f.sel2.options.selectedIndex].value;
var type = (f.sel3.options[f.sel3.options.selectedIndex].value == -1) ? 0 : f.sel2.options[f.sel2.options.selectedIndex].value;
f.priceForeach.value = "$"+parseInt(price*times+type);
if(times!=null) f.priceForAll.value = "$"+parseInt((times*price)+type);
}
//-->
</script>
</head><body>
<form action="" name="f1">
<select name="sel1" onChange="updatePrice(this.form);">
<option selected value="-1">Choose one...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="sel2" onChange="updatePrice(this.form);">
<option selected value="-1">Choose one...</option>
<option value="100">Product one</option>
<option value="200">Product two</option>
</select>
<select name="sel3" onChange="updatePrice(this.form);">
<option selected value="-1">Choose one...</option>
<option value="10">Product type1</option>
<option value="20">Product type2</option>
<option value="30">Product type3</option>
</select>
<input type="text" name="priceForeach">
<input type="text" name="priceForAll">
</form></body></html>
Jenuine
05-23-2003, 12:15 PM
I tried Jona's example. I got an error message that says 'priceForall' is null or not an object.
Jona
05-23-2003, 12:15 PM
I've edited my code above. Please try the new code.
Jenuine
05-23-2003, 12:23 PM
Thank you Jona! I will definitely try this.
:)
Jona
05-23-2003, 12:26 PM
You're welcome.
Jenuine
05-23-2003, 02:43 PM
I've been playing around with this some more, but I keep getting an error message. Whenever I select a quantity, I get a message that says "Object Required". I believe it's in the line that starts out as "var times = ". I've attached the file so you can see my code. Ignore the "sole type" and "heel type" columns. They are only informational and have nothing to do with any of the calculations.
Jona
05-23-2003, 02:58 PM
Undefined variable, "type." This works.
Jona
05-23-2003, 03:00 PM
I always forget to attach the file!
Jenuine
05-23-2003, 03:06 PM
thanks....It's better, but still not exactly what I'm looking for. I need it to calculate the price each (in one text box) and the extended price (in the other text box).
Jona
05-23-2003, 03:11 PM
Okay then...
Jenuine
05-23-2003, 03:32 PM
You've made me very happy so far. :D I think I just have one more question, and I should be able to then get the rest of my myself (I think). How do I calculate a grand total (ie. total price text box1 + total price text box2 + total price text box3)?
Jona
05-23-2003, 03:51 PM
Using the following code with the following even handler: onClick="calculateTotal(this.form);"


function calculateTotal(f){
f.totalPriceTextBox.value = parseFloat(f.totalBox1.value+f.totalBox2.value+f.totalBox3.value);
}
Jenuine
05-23-2003, 04:28 PM
:confused: I think I did exactly what you said, but when I click the button to calculate, I get an answer of $NaN. What do I need to change?
Jona
05-23-2003, 04:45 PM
You caught me at a bad time... lol But that's okay, I fixed it and made the function more dynamic so you don't have to write 3 different functions.
Jenuine
05-23-2003, 05:01 PM
BRAVO!! I'm beaming now. It's all working like a dream!!

Just one more question...When I click on "reset" only the information in the stuff we've been working on clears. How do I get everything in the entire form to clear?
Jona
05-23-2003, 05:08 PM
Put it all in the same <form>.
Jenuine
05-23-2003, 05:15 PM
Jona, I just wanted to thank you for helping me out with this. I greatly appreciate all the work you put into this. I hope you weren't too impatient with me.

You're a peach!! :D ;)
Jona
05-23-2003, 05:17 PM
You're very welcome. I'm glad I could help. ;)