Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Javascript help
Options
-
12-04-2008 1:05pm#1hello,
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>0
Comments
-
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.asp0 -
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>0 -
use the [php] tags
[.PHP] ......[./PHP]
take out othe dots in the tags.0 -
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]0 -
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().0 -
Advertisement
-
You could use a <textarea>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)
[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]0
Advertisement