View Full Version : add values in a dynamic table

03-23-2009, 01:18 PM

I'm trying to create a total figure on an order form and hope you can help.

Basically the order form works this way (see attached image to clarify) - the user clicks on one table to select the price wanted of the product and this value appears in the second right hand table automatically.

So far, so good.

But I am trying to get a subtotal value that adds the cost of the products automatically too.

At the moment I am using this function to set the price in the second table:

function set_price(val, count)
var g = <?=count?>;
var eachValue = document.getElementById("price" + g);
eachValue.innerHTML = "&pound;"+val;


And here is the code for the second table:

<table cellpadding="0" cellspacing="0" >
<? $count = 0;
foreach ($basket["records"] as $key => $record):
$title = $record["title"];
if(strlen($title) > 34) $title = substr($title, 0, 31) . "&hellip;";
<td class="your_order_item">
<p><a href="<?=$record_link?>"><?=$title?></a></p>

<td class="your_order_item">
<p id="price<?=$count?>">&pound;</p>

<? endforeach; ?>
<td class="your_order_summary">
<p>Sub total:</p>
<p id="subtotal">&pound;</p>
<td class="your_order_summary">
<p>VAT (<?=VAT_RATE?>%):</p>
<td class="your_order_summary your_order_overall">
<p>Overall total:</p>
<td class="your_order_overall">
<div class="your_order_terms black_link_underline">
<p><input type="checkbox" id="terms" /><label for="terms">I have read and agree to the terms and conditions.</label></p>
<p class="your_order_checkout"><input type="image" src="/images/basket_checkout.png" height="32" width="252" alt="Basket checkout button" /></p>
<div class="your_order_footer"></div>

<div class="usage_container">
<h2><img src="/images/basket_new_right_usage_info.png" height="16" width="118" alt="Usage information" /></h2>

<div class="clear"></div>


Please help.

Old Pedant
03-23-2009, 11:03 PM
Since this is the JavaScript forum, I assume you want a JavaScript answer.

So instead of showing us your raw PHP page with all the PHP code in it, bring up the page in your browser and do a SHOW-->>SOURCE of the page and post the HTML here. The PHP code is irrelevant to a JS solution.

And *PLEASE* wrap the code in [ code ] ... [ /code ] tags so we don't have to look at unaligned code.

03-23-2009, 11:04 PM
Sorry to pester, but does anyone have any ideas on this one?


Old Pedant
03-23-2009, 11:22 PM
Your picture is so small it's unreadable. It's also a ".bmp" file, so it's huge in comparison to the content.

NEVER MIND...managed to blow it up enough to read it.


I *THINK* I see the problem. You are getting NaN for a value because you are trying to parse the numbers from "$5" (pound sign, not dollar sign). You will need to strip of the pound sign before calling parseInt. And if you are doing this in PHP, same applies.

03-23-2009, 11:44 PM
Well, I was going to start another thread to try to get some ideas on how to code what I need to do, so I'll post this link to a similar type form calculator and entry system.
I need help figuring out how to remove the entries and redisplay the running totals when the customer wants to change something. Maybe somebody can suggest a good idea.

It's going to be my company name when I actually open the floor company sometime this year. Economy is a little down right now so I'm working on the site content. PDX is a common alias for my city, Portland.

<title>Hardwood Floors PDX Hardwood Floor Services Online Estimates</title>
<h1>Hardwood Floors PDX Online Estimator</h1>
<h2>Formulate an estimate for the cost your hardwood floor work.</h2>
<script type="text/javascript">
var updateTotal=false;
var runningTotal=0; /*Global...keeps a total of the entries ... resets to 0 each time calculateTotal ends*/
var thistotal=0; /*Global...the current entry ... resets to 0 each time calculateTotal ends*/
var customerTotalAll=new Array();
customerTotalAll[0]=0; /*Array...holds the entries for calculating the runningTotal*/
var customerTotal=new Array();
customerTotal[0]=0; /*Array...holds the current entry*/
customerEntryNumber=0; /Global...keeps track of entry numbers/

function calculateTotal(formValue){
if(updateTotal==true){var squarefootage=0;updateTotal==false}
else{var squarefootage=1;} /*reset Sqft variable*/
var total = 1; /*reset total variable*/
if (formValue.service[0].checked) {squarefootage = formValue.footage.value;total = 1} /*Premium service*/
if (formValue.service[1].checked) {squarefootage = formValue.footage.value;total = .85} /*Budget service*/
if (formValue.service[2].checked) {squarefootage = formValue.footage.value;total = .75} /*Rehab service*/
total = total*(formValue.selectedservice.value);

if (total>5){squarefootage=1} /*test for approximate square foot prices. Greater means non footage price*/

total = total*squarefootage;total = total.toFixed(2);
var elm=document.getElementById("SandingEstimate"); /*Get the div to show readout*/
"Your Estimate:<font color='#00aa00'> $" /*begining output text*/
+ total +
" </font> <br><input type='button' onClick='AddToTally("+total+");'>Would you like to add this to your total? "; /*ending output text*/

function AddToTally(thetotal){
else{customerEntryNumber+=1;} /*add 1 to create the next array element*/
customerTotalAll[customerEntryNumber]=thetotal; /*set customerTotalAll array value to the current total*/
thistotal=0; /*reset global variable*/
for(i=1;i<customerTotalAll.length;i++){runningTotal+=customerTotalAll[i];}/*add up all the entries*/
var elm=document.getElementById("CustomerTotals");
elm.innerHTML+="Entry "+customerEntryNumber+" :&nbsp;$ "+customerTotalAll[customerEntryNumber]+"<br>Your Current Estimate Total:&nbsp;<font color='#00aa00'>$ "+runningTotal+"</font>&nbsp;<a href='#' onclick='RemoveFromTally("+customerEntryNumber+")'>Remove this entry</a><br>";
runningTotal=0; /*reset global variable*/

function RemoveFromTally(removeMe){
customerTotalAll[removeMe]=0;/*set the array value to 0*/
AddToTally(0)/*update the page*/
<form id="form1" name="form1" method="get" action="">
<div align="center">
<label for="footage">Please enter square footage</label><br>

<input type="text" id="footage" tabindex="1" value="0" onClick="calculateTotal(this.form)" />
<input name="service" type="radio"
id="Premium" tabindex="1" onClick="calculateTotal(this.form)" />
<label for="Premium">Premium service. Extra fine sanding. 3 coats included</label>
<input name="service" type="radio"
id="Budget" tabindex="1" onClick="calculateTotal(this.form)" />
<label for="Budget"> Budget service. Standard sanding with 2 coats included </label>
<input name="service" type="radio"
id="Rehab" tabindex="1" onClick="calculateTotal(this.form)" />
<label for="Rehab">Rehab service. Quick sanding...ideal for rental units. 2 coats included</label>
<div align="center">Please select a sanding option: Click to view.<br>

<select id="selectedservice" value="50" tabindex="16" onChange="calculateTotal(this.form)">
<option value="1.50">Old floors Natural </option>
<option value="1.75">Old floors Stain </option>
<option value="1.25">New floors Natural </option>
<option value="1.50">New floors Stain </option>
<option value="250">Stairs with ballisters $250/11 treads. Staining $50 extra</option>
<option value="200">Stairs w/out ballisters $200/11 treads. Staining included </option>
<option value=".60">Buff and recoat existing floors with repairs $.60</option>
<option value=".35">Buff and recoat existing floors w/out repairs $.35</option>

<p><span id="SandingEstimate"></span>
<div ID="CustomerTotals"></div>

Old Pedant
03-24-2009, 01:27 AM
Now you don't need to tell a SEA person what PDX means! <grin/>

Okay, I see it.

But, really, you should have started another thread, because I suspect this one is going to get moved to a PHP forum pretty soon. Might be wrong, but...

What you are after seems easy enough, except that you make it tough by having only the one entry form to control several line items. So how does a person go *BACK* to a given line item? Obvious answer: by clicking on it. But then how do you make it obvious that he uses the same controls to change the contents?

I would be sorely tempted to redesign the <FORM> to have full info for each item in the row with each item.