Javascript help

ComplyOrDie · 12-04-2008 12:05pm #1

hello,
As you can see from the code below i'm not very good at javascript and need some help.

I want to be able to select a number from the dropdown list and when this happens a price is calculated (in this case hardcoded at 20 ), i will eventually want it printed to a text box, however for the moment the screen or an alert box will do.
can anyone help

<html>
<body>
<select name=productQuantity size=1>
<option value=0>0
<option value=1>1
<option value=2>2
<option value=3>3
<option value=4>4
</select>

<script type="text/javascript">

if(productQuantity>=1)
{
var x=(productQuantity*20);

alert(x);
}

</script>
</body>
</html>

NotMe · 12-04-2008 2:26pm

You want to make a function that you call when the value in the drop down list is changed.

The function will look something like:
[php]
<head>
<script type="text/javascript">
function testFunction() {
var prodQuantity = document.getElementById("productQuantity").value;
var x = prodQuantity * 20;
alert(x);
}
</script>
</head>
[/php]

document.getElementById("productQuantity").value will give you the current selected value in the drop down box.

In the html part you have onchange="testFunction()" to tell it to call that function when the value changes:

[php]
<body>
<select onchange="testFunction()" id="productQuantity" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>
</body>
[/php]

If you want to set the value in a text box, instead of alert(x) you can use:
[php]document.getElementById("result").value = x;
[/php]
and
[php]
<input type="text" value="0" id="result" />
[/php]

Full example:
[php]
<html>
<head>
<script type="text/javascript">
function testFunction() {
var prodQuantity = document.getElementById("productQuantity").value;
var x = prodQuantity * 20;
document.getElementById("result").value = x;
}
</script>
</head>
<body>
<select onchange="testFunction()" id="productQuantity" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>

<br/><br/>

<input id="result" type="text" value="0" />

</body>
</html>
[/php]

Lots of good tutorials here:
http://www.w3schools.com/JS/default.asp

ComplyOrDie · 12-04-2008 5:42pm

Thanks NotMe for your help. I have looked at some tutorials on thenewboston.com but as you can tell am still very weak at javascript.

I am trying to create a textbox/area that will show customers the quantity of goods, the goods name and the price (bottom of screen) kinda like a shopping basket. just say i had fruit for sale so the form would look like this apples (productName) dropDownList1 (Quantity)
oranges (productName) dropDownList2 (Quantity)
pears (productName) dropDownList3 (Quantity)

so the customer decides he wants 3 apples 4 oranges and 2 pears (and selects from drop down lists).

so when the customer selects the quantity
the following appears in the box
your order is
3 apples €2
4 oranges €4
2 pears €1.50
9 items selected total cost €7.50
Above is what i hope to achieve, however i am taking small steps to get there (so i will learn along the way)

I have some questions for you

How do you put in your text in that blueish box (on boards)
At the end of the code you entered <input id="result" type="text" value="0" /> i know this creates a text box, but what does it mean
My next question is how would you display the results from the script below in one box (it is you code modified to allow more products)
I am having some trouble getting a total.

<html>
<head>
<script type="text/javascript">
function testFunction() {

var productPrice1= 2.50
var productPrice2= 3.90
var productPrice3= 4.80
var productPrice4= 3.20
var productPrice5= 2.20
var productPrice6= 6.90

var prodQuantity = document.getElementById("productQuantity").value;
var x1 = prodQuantity * productPrice1;
document.getElementById("result1").value = x1;

var prodQuantity2 = document.getElementById("productQuantity2").value;
var x2 = prodQuantity2 * productPrice2;
document.getElementById("result2").value = x2;

var prodQuantity3 = document.getElementById("productQuantity3").value;
var x3 = prodQuantity3 * productPrice3;
document.getElementById("result3").value = x3;

var prodQuantity4 = document.getElementById("productQuantity4").value;
var x4 = prodQuantity4 * productPrice4;
document.getElementById("result4").value = x4;

var prodQuantity5 = document.getElementById("productQuantity5").value;
var x5 = prodQuantity5 * productPrice5;
document.getElementById("result5").value = x5;

var prodQuantity6 = document.getElementById("productQuantity6").value;
var x6 = prodQuantity6 * productPrice6;
document.getElementById("result6").value = x6;

}
function updateTotal()
{
var totalPrice = document.getElementById("totalPrice").value;
var tp1 = x1+x2+x3+x4+x5+x6;
document.getElementById("resultTotal").value = tp1;
}
</script>
</head>
<body>
<select onchange="testFunction()" id="productQuantity" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>
<br/><br/>
<select onchange="testFunction()" id="productQuantity2" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>
<br/><br/>
<select onchange="testFunction()" id="productQuantity3" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>
<br/><br/>
<select onchange="testFunction()" id="productQuantity4" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>
<br/><br/>
<select onchange="testFunction()" id="productQuantity5" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>
<br/><br/>
<select onchange="testFunction()" id="productQuantity6" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>

<br/><br/>

The cost of product 1 is <input id="result1" type="text" value="0" />
<br/><br/>
The cost of product 2 is <input id="result2" type="text" value="0" />
<br/><br/>
The cost of product 3 is <input id="result3" type="text" value="0" />
<br/><br/>
The cost of product 4 is <input id="result4" type="text" value="0" />
<br/><br/>
The cost of product 5 is <input id="result5" type="text" value="0" />
<br/><br/>
The cost of product 6 is <input id="result6" type="text" value="0" />
<br/><br/>
<P><INPUT TYPE=button VALUE="Total" onclick="updateTotal()"> <TD>
<br/><br/>
The total cost is <input id="resultTotal" type="text" value="0" />
</body>
</html>

Creamy Goodness · 12-04-2008 5:46pm

use the [php] tags

[.PHP] ......[./PHP]

take out othe dots in the tags.

ComplyOrDie · 12-04-2008 6:00pm

Thanks NotMe for your help. I have looked at some tutorials on thenewboston.com but as you can tell am still very weak at javascript.

I am trying to create a textbox/area that will show customers the quantity of goods, the goods name and the price (bottom of screen) kinda like a shopping basket. just say i had fruit for sale so the form would look like this apples (productName) dropDownList1 (Quantity)
oranges (productName) dropDownList2 (Quantity)
pears (productName) dropDownList3 (Quantity)

so the customer decides he wants 3 apples 4 oranges and 2 pears (and selects from drop down lists).

so when the customer selects the quantity
the following appears in the box
your order is
3 apples €2
4 oranges €4
2 pears €1.50
9 items selected total cost €7.50
Above is what i hope to achieve, however i am taking small steps to get there (so i will learn along the way)

I have some questions for you

How do you put in your text in that blueish box (on boards)
At the end of the code you entered <input id="result" type="text" value="0" /> i know this creates a text box, but what does it mean
My next question is how would you display the results from the script below in one box (it is you code modified to allow more products)
I am having some trouble getting a total.

[PHP]

<html>
<head>
<script type="text/javascript">
function testFunction() {

var productPrice1= 2.50
var productPrice2= 3.90
var productPrice3= 4.80
var productPrice4= 3.20
var productPrice5= 2.20
var productPrice6= 6.90

var prodQuantity = document.getElementById("productQuantity").value;
var x1 = prodQuantity * productPrice1;
document.getElementById("result1").value = x1;

var prodQuantity2 = document.getElementById("productQuantity2").value;
var x2 = prodQuantity2 * productPrice2;
document.getElementById("result2").value = x2;

var prodQuantity3 = document.getElementById("productQuantity3").value;
var x3 = prodQuantity3 * productPrice3;
document.getElementById("result3").value = x3;

var prodQuantity4 = document.getElementById("productQuantity4").value;
var x4 = prodQuantity4 * productPrice4;
document.getElementById("result4").value = x4;

var prodQuantity5 = document.getElementById("productQuantity5").value;
var x5 = prodQuantity5 * productPrice5;
document.getElementById("result5").value = x5;

var prodQuantity6 = document.getElementById("productQuantity6").value;
var x6 = prodQuantity6 * productPrice6;
document.getElementById("result6").value = x6;

}
function updateTotal()
{
var totalPrice = document.getElementById("totalPrice").value;
var tp1 = x1+x2+x3+x4+x5+x6;
document.getElementById("resultTotal").value = tp1;
}
</script>
</head>
<body>
<select onchange="testFunction()" id="productQuantity" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>
<br/><br/>
<select onchange="testFunction()" id="productQuantity2" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>
<br/><br/>
<select onchange="testFunction()" id="productQuantity3" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>
<br/><br/>
<select onchange="testFunction()" id="productQuantity4" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>
<br/><br/>
<select onchange="testFunction()" id="productQuantity5" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>
<br/><br/>
<select onchange="testFunction()" id="productQuantity6" size="1">
<option>0
<option>1
<option>2
<option>3
<option>4
</select>

<br/><br/>

The cost of product 1 is <input id="result1" type="text" value="0" />
<br/><br/>
The cost of product 2 is <input id="result2" type="text" value="0" />
<br/><br/>
The cost of product 3 is <input id="result3" type="text" value="0" />
<br/><br/>
The cost of product 4 is <input id="result4" type="text" value="0" />
<br/><br/>
The cost of product 5 is <input id="result5" type="text" value="0" />
<br/><br/>
The cost of product 6 is <input id="result6" type="text" value="0" />
<br/><br/>
<P><INPUT TYPE=button VALUE="Total" onclick="updateTotal()"> <TD>
<br/><br/>
The total cost is <input id="resultTotal" type="text" value="0" />
</body>
</html>
[/PHP]

daymobrew · 13-04-2008 8:29pm

The updateTotal() function is referencing variables that are local to the testFunction() function.

I would suggest moving the updateTotal() code into the testFunction() function. This will update the total when a drop down listbox is changed with no need to click another button to update the total.

You can always set the Total button to call testFunction().

NotMe · 13-04-2008 10:07pm

ComplyOrDie wrote: »

My next question is how would you display the results from the script below in one box (it is you code modified to allow more products)

You could use a <textarea>

[php]
<textarea id="output" rows="20" cols="50" readonly="readonly">
**output**
</textarea>

[/php]

and

[php]
document.getElementById("output").value =
"The cost of product 1 is " + x1
+ "\nThe cost of product 2 is " + x2
+ "\nThe cost of product 3 is " + x3
+ "\nThe cost of product 4 is " + x4
+ "\nThe cost of product 5 is " + x5
+ "\nThe cost of product 6 is " + x6
+ "\n\nThe total cost is " + tp1;
[/php]

or if you just want the results printed on the page (not in a text box) you could have:
[php]<p id="output"></p>[/php]
and
[php]document.getElementById("output").innerHTML = "...whatever...";[/php]

Javascript help

Comments