I have a table running with combo boxes, basically selecting an item in the combo box (located in a <td>) will insert the selection and a price in the following <td>
but currently I am having problems creating the a total of the prices, is there any help out there?
30 9008
You can use JavaScript to do the calculations for the Total column.
Ronald
You can use JavaScript to do the calculations for the Total column.
Ronald
I seem to be having problems with that as well, how would that be done?
html/css cannot do this. I'll transfer you to the javascript forum.
gits 5,390
Expert Mod 4TB
hi ...
please post the code you already have ... so that we may help you with the particular problems you might have ...
kind regards
Post what code you have so far.
The script thus far, I shall be adding a little more but am stuck on this "Total" part: - <html>
-
<head><title>???</title>
-
-
<script type="text/javascript">
-
function getinfo()
-
{
-
var mylist=document.getElementById("info")
-
document.getElementById("displayinfo").innerHTML=mylist.options[mylist.selectedIndex].price
-
}
-
-
function getinfo1()
-
{
-
var mylist=document.getElementById("info1")
-
document.getElementById("displayinfo1").innerHTML=mylist.options[mylist.selectedIndex].price
-
}
-
-
function getinfo2()
-
{
-
var mylist=document.getElementById("info2")
-
document.getElementById("displayinfo2").innerHTML=mylist.options[mylist.selectedIndex].price
-
}
-
</script>
-
-
</head>
-
<body>
-
<table border="1">
-
<tr>
-
<td width="95" align="right">
-
<select id="info" onchange="getinfo()">
-
<option selected price=" ">Select</option>
-
<option price="19.00">Unit 1</option>
-
<option price="22.00">Unit 2</option>
-
<option price="25.00">Unit 3</option>
-
<option price="29.00">Unit 4</option>
-
<option price="32.00">Unit 5</option>
-
</select>
-
</td>
-
<td width="75" align="right" id="displayinfo"> </td>
-
</tr>
-
-
<tr>
-
<td width="95" align="right">
-
<select id="info1" onchange="getinfo1()">
-
<option selected price=" ">Select</option>
-
<option price="84.00">Next 1</option>
-
<option price="85.00">Next 2</option>
-
<option price="86.00">Next 3</option>
-
<option price="87.00">Next 4</option>
-
<option price="88.00">Next 5</option>
-
</select>
-
</td>
-
<td width="75" align="right" id="displayinfo1"> </td>
-
</tr>
-
-
<tr>
-
<td width="95" align="right">
-
<select id="info2" onchange="getinfo2()">
-
<option selected price=" ">Select</option>
-
<option price="99.00">Again 1</option>
-
<option price="92.00">Again 2</option>
-
<option price="95.00">Again 3</option>
-
<option price="99.00">Again 4</option>
-
<option price="92.00">Again 5</option>
-
</select>
-
</td>
-
<td width="75" align="right" id="displayinfo2"> </td>
-
</tr>
-
-
<tr>
-
<td width="95" align="right">Total = </td>
-
<td width="75" align="right"> </td>
-
</tr>
-
</table>
-
-
</body>
-
</html>
gits 5,390
Expert Mod 4TB
hi ...
a simple way would be to use a global array and push the value to add everytime you select a value in your select-boxes. then loop through the array and add the values ... finally set the value to the display-node ...
if you need help on that ... post back with particular questions ...
kind regards
hi ...
please post the code you already have ... so that we may help you with the particular problems you might have ...
kind regards
The script thus far, I shall be adding a little more but am stuck on this "Total" part: -
<html>
-
<head><title>???</title>
-
-
<script type="text/javascript">
-
function getinfo()
-
{
-
var mylist=document.getElementById("info")
-
document.getElementById("displayinfo").innerHTML=mylist.options[mylist.selectedIndex].price
-
}
-
-
function getinfo1()
-
{
-
var mylist=document.getElementById("info1")
-
document.getElementById("displayinfo1").innerHTML=mylist.options[mylist.selectedIndex].price
-
}
-
-
function getinfo2()
-
{
-
var mylist=document.getElementById("info2")
-
document.getElementById("displayinfo2").innerHTML=mylist.options[mylist.selectedIndex].price
-
}
-
</script>
-
-
</head>
-
<body>
-
<table border="1">
-
<tr>
-
<td width="95" align="right">
-
<select id="info" onchange="getinfo()">
-
<option selected price=" ">Select</option>
-
<option price="19.00">Unit 1</option>
-
<option price="22.00">Unit 2</option>
-
<option price="25.00">Unit 3</option>
-
<option price="29.00">Unit 4</option>
-
<option price="32.00">Unit 5</option>
-
</select>
-
</td>
-
<td width="75" align="right" id="displayinfo"> </td>
-
</tr>
-
-
<tr>
-
<td width="95" align="right">
-
<select id="info1" onchange="getinfo1()">
-
<option selected price=" ">Select</option>
-
<option price="84.00">Next 1</option>
-
<option price="85.00">Next 2</option>
-
<option price="86.00">Next 3</option>
-
<option price="87.00">Next 4</option>
-
<option price="88.00">Next 5</option>
-
</select>
-
</td>
-
<td width="75" align="right" id="displayinfo1"> </td>
-
</tr>
-
-
<tr>
-
<td width="95" align="right">
-
<select id="info2" onchange="getinfo2()">
-
<option selected price=" ">Select</option>
-
<option price="99.00">Again 1</option>
-
<option price="92.00">Again 2</option>
-
<option price="95.00">Again 3</option>
-
<option price="99.00">Again 4</option>
-
<option price="92.00">Again 5</option>
-
</select>
-
</td>
-
<td width="75" align="right" id="displayinfo2"> </td>
-
</tr>
-
-
<tr>
-
<td width="95" align="right">Total = </td>
-
<td width="75" align="right"> </td>
-
</tr>
-
</table>
-
-
</body>
hi ...
a simple way would be to use a global array and push the value to add everytime you select a value in your select-boxes. then loop through the array and add the values ... finally set the value to the display-node ...
if you need help on that ... post back with particular questions ...
kind regards
Hi, I'm not particularly well practiced with javascript therefore a "global array" and "display-node" doesn't mean a great deal I'm afraid.
Stevee, remember to use code tags when posting code, e.g.
[CODE=javascript]Javascript code goes here[/code]
Stevee, remember to use code tags when posting code, e.g. - Javascript code goes here
Stoopid me ok - Why?
Instead of "price", use the normal attribute "value", e.g.
[HTML]<option value="99.00">[/HTML]
In each function, update the total too (by summing the three selects).
Give the td which will contain the total value an id. This will make it easier to access it.
Stoopid me ok - Why?
Makes it a lot easier to read, plus you get syntax highlighting as a bonus.
Instead of "price", use the normal attribute "value", e.g.
[HTML]<option value="99.00">[/HTML]
In each function, update the total too (by summing the three selects).
Give the td which will contain the total value an id. This will make it easier to access it.
Right, I will give that a go and let you know if I managed on Monday.
Thanks.
Right, I will give that a go and let you know if I managed on Monday.
Thanks.
Right I have been giving that lot a go but still don't think I understand (obviously)
<html>
<head><title>???</title> -
<script type="text/javascript">
-
function getinfo()
-
{
-
var mylist=document.getElementById("info")
-
document.getElementById("displayinfo").innerHTML=mylist.options[mylist.selectedIndex].value
-
}
-
-
function getinfo1()
-
{
-
var mylist=document.getElementById("info1")
-
document.getElementById("displayinfo1").innerHTML=mylist.options[mylist.selectedIndex].value
-
}
-
-
function getinfo2()
-
{
-
var mylist=document.getElementById("info2")
-
document.getElementById("displayinfo2").innerHTML=mylist.options[mylist.selectedIndex].value
-
}
-
</script>
-
-
-
<script type="text/javascript">
-
function startCalc()
-
{
-
one = mylist=document.getElementById("info").value;
-
two = mylist=document.getElementById("info1").value;
-
three = mylist=document.getElementById("info2").value;
-
TotalValue.value = (one * 1) + (two * 1) + (three * 1);
-
}
-
</script>
-
-
-
</head>
-
<body>
-
<table border="1">
-
<tr>
-
<td width="95" align="right">
-
<select id="info" onchange="getinfo();startCalc()">
-
<option selected price=" ">Select</option>
-
<option value="19.00">Unit 1</option>
-
<option value="22.00">Unit 2</option>
-
<option value="25.00">Unit 3</option>
-
<option value="29.00">Unit 4</option>
-
<option value="32.00">Unit 5</option>
-
</select>
-
</td>
-
<td width="75" align="right" id="displayinfo"> </td>
-
</tr>
-
-
<tr>
-
<td width="95" align="right">
-
<select id="info1" onchange="getinfo1();startCalc()">
-
<option selected price=" ">Select</option>
-
<option value="84.00">Next 1</option>
-
<option value="85.00">Next 2</option>
-
<option value="86.00">Next 3</option>
-
<option value="87.00">Next 4</option>
-
<option value="88.00">Next 5</option>
-
</select>
-
</td>
-
<td width="75" align="right" id="displayinfo1"> </td>
-
</tr>
-
-
<tr>
-
<td width="95" align="right">
-
<select id="info2" onchange="getinfo2();startCalc()">
-
<option selected price=" ">Select</option>
-
<option value="99.00">Again 1</option>
-
<option value="92.00">Again 2</option>
-
<option value="95.00">Again 3</option>
-
<option value="99.00">Again 4</option>
-
<option value="92.00">Again 5</option>
-
</select>
-
</td>
-
<td width="75" align="right" id="displayinfo2"> </td>
-
</tr>
-
-
<tr>
-
<td width="95" align="right">Total = </td>
-
<td id="TotalValue" width="75" align="right" value=""> </td>
-
</tr>
-
</table>
-
-
</body>
-
</html>
-
-
-
Right I have been giving that lot a go but still don't think I understand (obviously)
A td element does not have a value attribute. Use innerHTML instead: - document.getElementById("TotalValue").innerHTML
You should also set the values of the first option of each select rather than using price which will probably result in NaN for the total.
Thank you it now works a treat.
Except, the combo <TD>'s have 2 decimal places and the TotalValue has quite a few more, even though I only put in whole pence?
Regards, Stevee. -
<html>
-
<head><title>???</title>
-
-
<script type="text/javascript">
-
function getinfo()
-
{
-
var mylist=document.getElementById("info")
-
document.getElementById("displayinfo").innerHTML=mylist.options[mylist.selectedIndex].value
-
}
-
-
function getinfo1()
-
{
-
var mylist=document.getElementById("info1")
-
document.getElementById("displayinfo1").innerHTML=mylist.options[mylist.selectedIndex].value
-
}
-
-
function getinfo2()
-
{
-
var mylist=document.getElementById("info2")
-
document.getElementById("displayinfo2").innerHTML=mylist.options[mylist.selectedIndex].value
-
}
-
</script>
-
-
<script type="text/javascript">
-
function startCalc()
-
{
-
one = mylist=document.getElementById("info").value;
-
two = mylist=document.getElementById("info1").value;
-
three = mylist=document.getElementById("info2").value;
-
document.getElementById("TotalValue").innerHTML = (one * 1) + (two * 1) + (three * 1);
-
}
-
</script>
-
-
-
</head>
-
<body>
-
<table border="1">
-
<tr>
-
<td width="95" align="right">
-
<select id="info" onchange="getinfo();startCalc()">
-
<option selected value="12">Select</option>
-
<option value="19.00">Unit 1</option>
-
<option value="22.00">Unit 2</option>
-
<option value="25.00">Unit 3</option>
-
<option value="29.00">Unit 4</option>
-
<option value="32.00">Unit 5</option>
-
</select>
-
</td>
-
<td width="75" align="right" id="displayinfo"> </td>
-
</tr>
-
-
<tr>
-
<td width="95" align="right">
-
<select id="info1" onchange="getinfo1();startCalc()">
-
<option selected value=" ">Select</option>
-
<option value="84.00">Next 1</option>
-
<option value="85.00">Next 2</option>
-
<option value="86.00">Next 3</option>
-
<option value="87.00">Next 4</option>
-
<option value="88.00">Next 5</option>
-
</select>
-
</td>
-
<td width="75" align="right" id="displayinfo1"> </td>
-
</tr>
-
-
<tr>
-
<td width="95" align="right">
-
<select id="info2" onchange="getinfo2();startCalc()">
-
<option selected value=" ">Select</option>
-
<option value="99.00">Again 1</option>
-
<option value="92.00">Again 2</option>
-
<option value="95.00">Again 3</option>
-
<option value="99.00">Again 4</option>
-
<option value="92.00">Again 5</option>
-
</select>
-
</td>
-
<td width="75" align="right" id="displayinfo2"> </td>
-
</tr>
-
-
<tr>
-
<td width="95" align="right">Total = </td>
-
<td id="TotalValue" width="75" align="right" value=""> </td>
-
</tr>
-
</table>
-
-
</body>
-
</html>
-
Thank you it now works a treat.
Except, the combo <TD>'s have 2 decimal places and the TotalValue has quite a few more, even though I only put in whole pence?
On line 30, the 'correct' way to parse strings for numbers is to use parseFloat(). If you do have problems with decimal places, use toFixed on modern browsers.
On line 30, the 'correct' way to parse strings for numbers is to use parseFloat(). If you do have problems with decimal places, use toFixed on modern browsers.
OK, total lack of knowledge again, where on line 30
I currently have placed it here:
document.getElementById("TotalValue").innerHTML = parseFloat(one + two + three);
which still works and has reduced the decimals to 4 places.
Is this Tofixed another script or does it fit neatly (somewhere) into the:
<td id="TotalValue" width="75" align="right">
OK, total lack of knowledge again, where on line 30
I currently have placed it here:
document.getElementById("TotalValue").innerHTML = parseFloat(one + two + three);
which still works and has reduced the decimals to 4 places.
Put it around each value. You could put it on the previous three lines, e.g. - one = parseFloat(document.getElementById("info").value);
Is this Tofixed another script or does it fit neatly (somewhere) into the:
<td id="TotalValue" width="75" align="right">
See the examples in the link. Use it on the TotalValue.
Put it around each value. You could put it on the previous three lines, e.g. - one = parseFloat(document.getElementById("info").value);
See the examples in the link. Use it on the TotalValue.
-
<script type="text/javascript">
-
function startCalc()
-
{
-
one = parseFloat(mylist=document.getElementById("info").value);
-
two = parseFloat(mylist=document.getElementById("info1").value);
-
three = parseFloat(mylist=document.getElementById("info2").value);
-
document.getElementById("TotalValue").innerHTML = parseFloat(one + two + three);
-
}
-
</script>
-
Now I get the dreaded - NaN
-
<script type="text/javascript">
-
function startCalc()
-
{
-
one = parseFloat(mylist=document.getElementById("info").value);
-
two = parseFloat(mylist=document.getElementById("info1").value);
-
three = parseFloat(mylist=document.getElementById("info2").value);
-
document.getElementById("TotalValue").innerHTML = parseFloat(one + two + three);
-
}
-
</script>
-
Now I get the dreaded - NaN
You don't need 'mylist=' and you can remove the parseFloat when totalling because they've already been parsed.
You don't need 'mylist=' and you can remove the parseFloat when totalling because they've already been parsed.
Right, I have tried that again and the TotalValue gives me the NaN -
<script type="text/javascript">
-
function startCalc()
-
{
-
one = parseFloat(document.getElementById("info").value);
-
two = parseFloat(document.getElementById("info1").value);
-
three = parseFloat(document.getElementById("info2").value);
-
document.getElementById("TotalValue").innerHTML = (one * 1) + (two * 1) + (three * 1);
-
}
-
</script>
-
Right, I have tried that again and the TotalValue gives me the NaN
Instead of a space for the default option values, put 0.
Instead of a space for the default option values, put 0.
Gotcha, thankyou.
But why when it adds up 2 of the combo numbers ie 19.52 + 100 it equals 119.52
However when I add 3 of the combo numbers ie 19.52 + 100 + 99 it equals 218.51999999999998
Gotcha, thankyou.
But why when it adds up 2 of the combo numbers ie 19.52 + 100 it equals 119.52
However when I add 3 of the combo numbers ie 19.52 + 100 + 99 it equals 218.51999999999998
That's a floating point accuracy problem - see link. Use toFixed() to fix it to 2 decimal places.
That's a floating point accuracy problem - see link. Use toFixed() to fix it to 2 decimal places.
Sorry, I did no better than a "D" in GCE Math some 31 years ago, and that lot just wasted me. can you assist with the toFix please
Sorry, I did no better than a "D" in GCE Math some 31 years ago, and that lot just wasted me. can you assist with the toFix please
toFixed is used on a number, so you could do something like: - total = one + two + three;
-
total = total.toFixed(2);
-
document.getElementById("TotalValue").innerHTML = total;
toFixed is used on a number, so you could do something like: - total = one + two + three;
-
total = total.toFixed(2);
-
document.getElementById("TotalValue").innerHTML = total;
Thankyou, I had to amend slightly (one * 1) + etc but this works great: -
<script type="text/javascript">
-
function startCalc()
-
{
-
one = document.getElementById("info").value;
-
two = document.getElementById("info1").value;
-
three = document.getElementById("info2").value;
-
total = (one * 1) + (two * 1) + (three * 1);
-
total = total.toFixed(2);
-
four = document.getElementById("TotalValue").innerHTML = total;
-
totalvat = (four / 100 * 17.5) + (four * 1);
-
totalvat = totalvat.toFixed(2);
-
five = document.getElementById("TotalVat").innerHTML = totalvat;
-
}
-
</script>
-
My biggest problem was how to tell it the number toFix was TotalValue
Glad to hear you finally got it working how you want it.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Randell D. |
last post by:
Folks,
When creating a table, is there any advantage in specifying the columns in
any special order? For example, what about columns with data used more
frequently listed first, or column/data...
|
by: Not Me |
last post by:
Hi,
I'm sure this is a common problem.. to create a single field from a
whole column, where each row would be separated by a comma.
I can do this for a specified table, and column.. and I've...
|
by: Peter Foti |
last post by:
Hi all,
I have a form that contains a 2 column table. In the left column is the
description for a particular input (ie - "First Name", "Last Name", "Phone
Number", etc.). In the right column...
|
by: Kathy |
last post by:
Hi and thanks in advance for your help! I have Access 2000. I have
imported a delinited text file and now have table with one column
containing 100 records. I would like to display these values in...
|
by: Hymer |
last post by:
Hello,
I have a small two-column table with three rows. The first column has a logo
and the second column has the name of the organization.
The logo's in the first column are too high. That...
|
by: Hymer |
last post by:
Hello,
I have a small two-column table with three rows. The first column has a logo
and the second column has the name of the organization.
The logo's in the first column are too high. That...
|
by: ste |
last post by:
Hi there,
I'm trying to query a MySQL database (containing image data) and to output
the results in a HTML table of 3 columns wide (and however many rows it
takes) in order to create a basic...
|
by: akress |
last post by:
Hiya,
I'm trying to convert a table with 6 colums that looks like this:
<table class="myTable" width="640px">
<tr>
<td><a href="#">
<img src="../_img/announce.gif" align="middle"...
|
by: kelvin.koogan |
last post by:
I want to display a two column multi-row table in a Windows Forms app.
I want the user to be able to edit all values in both columns. Table
will need to scroll vertically.
What is the best...
|
by: Csaba Gabor |
last post by:
I have a table with 3 rows, and two pieces of data to display
in each row. However, the first element of the last two rows
and the 2nd element of the 1st row are very short. This would
seem to...
|
by: DolphinDB |
last post by:
Tired of spending countless mintues downsampling your data? Look no further!
In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: Vimpel783 |
last post by:
Hello!
Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
|
by: ArrayDB |
last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
|
by: PapaRatzi |
last post by:
Hello,
I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: Shællîpôpï 09 |
last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
|
by: af34tf |
last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
| |