I need help with the Select Option.....

courtjester · #1 (**permalink**) Nov 19th, 2003, 03:36

Ok, I am building a huge script. It is going to be for a customizeable pc page. They want it done in JavaScript so that is all good. What I don't know how to do is this. How do I set the Options on a select field equal to something. Then take what it is equal too and send it to be added. What I have come up with is a big mess. Once I get all the select fields turned into variables I am good. I can do all that, it's just getting these select fields read and sent to be added. If you would like to see the coding I have I will be more than glad to email it to you. Thanks again.

Webforumz Staff · #2 (**permalink**) Nov 19th, 2003, 04:57

When you say 'send to be added' are you sending the form values to a server-side script? Rather than email the code, posting the page to some temp place that we could look at it would make it easier for everyone to help.

courtjester · #3 (**permalink**) Nov 19th, 2003, 06:34

well I am not using any server side scripting for this. What I am doing is starting the script declaring all my variables. Then I add all of these variables up and display the sum on the bottom of the page. What I can't figure out is how I make the different Options in a drop down box equal a different value for that variable so that I can edit the form accordingly.

F.E.-
If I had a drop down list with 3 different options:
20 gig HD - $50
40 gig HD - $100
60 gig HD - $150

Then.. I will have a variable called hardDrive for example. When I use the drop down box to select a 60 gig Hard drive, I want that option to change the variable to "150". That way, when you add the total price you get what you are looking for. I hope this helps you understand it better. I know I have to add a submit button...

Webforumz Staff · #4 (**permalink**) Nov 19th, 2003, 07:08

with a SELECT you can set values for each option other than what's displayed:

Code: Select all

<option value="100">40 gig HD - $100</option>
<option value="150">60 gig HD - $150</option>

etc

on the SELECT use the onChange event to call the function that adds the different prices up, that way it'll update the price every time they change an option without having to hit a submit button.

Instead of using variables for each price just use the value of the currently selected option of that SELECT, like if you've got SELECT NAME="hardDrive" you'd get the current value with:

Code: Select all

hardDrive.options[hardDrive.selectedIndex].value

courtjester · #5 (**permalink**) Nov 19th, 2003, 07:42

I am sorry.. Let me post this code and if you can edit it showing me how to use the onChange and the Others I would appreciate it. I am very new to Javascript. Thanks a bunch. Ohh, and I don't need one made for memory stick, I can make all the others myself if someone can show me how to use what Catalyst said.

<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var hardDrive = 100;
var memoryStick = 200;
add = hardDrive + memoryStick;
document.write("$" + add);
</SCRIPT>

<SELECT NAME="hardDrive">
<OPTION VALUE="200">20 gig Hard Drive</OPTION>
<OPTION VALUE="300">40 gig Hard Drive</OPTION>
<OPTION VALUE="400">60 gig Hard Drive</OPTION>
<OPTION VALUE="500">80 gig Hard Drive</OPTION>
</SELECT>
</BODY>
</HTML>

u2orange · #6 (**permalink**) Nov 19th, 2003, 08:49

This will give you an idea. BTW, the innerHTML bit is not Opera/NS compatible, I put it together just for the example.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script language="JavaScript" type="text/javascript">
	function doCalculate()
		{
		var curHDD
		var curMonitor
		
		switch (document.frmPcOptions.optHDD.value)
			{
			case "20GB":
				curHDD = 100
				break
			
			case "40GB":
				curHDD = 130
				break
				
			case "60GB":
				curHDD = 150
				break
			
			default:
				curHDD = 0
				break
			}
			
		switch (document.frmPcOptions.optMonitor.value)
			{
			case "17TFT":
				curMonitor = 120
				break
			
			case "17CRT":
				curMonitor = 80
				break
			
			default:
				curMonitor = 0
				break
			}
			
		inner = document.getElementById("Price");
		inner.innerHTML = "Total: " + (curHDD + curMonitor)
		}
	</script>
</head>

<body>

<form name="frmPcOptions">
	HDD: 
	<select name="optHDD" onChange="doCalculate()">
		<option value="">Select a HDD</option>
		<option value="20GB">20GB - $100</option>
		<option value="40GB">40GB - $130</option>
		<option value="60GB">60GB - $150</option>
	</select>
	
	

	
	Monitor:
	<select name="optMonitor" onChange="doCalculate()">
		<option value="">None</option>
		<option value="17TFT">17" TFT - $120</option>
		<option value="17CRT">17" CRT - $80</option>
	</select>
</form>

<div id="price">Total: $0</div>
</body>
</html>

HTH
u2o

courtjester · #7 (**permalink**) Nov 19th, 2003, 14:34

thank you so much for your help. I really appreciate it.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
chained select box dependable select	thenamenoonehastaken	JavaScript Forum	0	Feb 8th, 2008 05:49
Option values	AdINo	Web Page Design	3	Jul 6th, 2007 10:09
Option values	AdINo	JavaScript Forum	2	Jul 5th, 2007 18:48
How to put bookmark option in my website	lekha	Starting Out	1	May 12th, 2007 11:47
Drop Down Default Option	kal	PHP Forum	2	Feb 13th, 2006 07:43

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
I need help with the Select Option.....