Calculating a total in a textfield?

Solarpitch · August 14, 2008

Hey,

I'm not sure where I can find a tutorial for this but basically I'm created a purchase ordering form. When the user enters a quantity of a product into the quantity textfield I want it to populate the corresponding "total" textfield with the calculated total.

So if they enter quantity as 5 and the product is €10... it will populate the total textfield with €50 when the user clicks out of the quantity textfield. I seen this done on a few sites but not sure where to start with it as my JS is not the best.

adam84 · August 14, 2008

JS

<SCRIPT>
function doCalc( num ){
//test to make sure that it is a number - to lazy to do it
//do number formating
document.getElementById('total').innerHTML = document.getElementById('price').value * num;
}
</SCRIPT>

HTML

Quantity: <input type="text" SIZE=3 NAME='quant' ID='quant' ONKEYUP='doCalc(this.value);'><BR>
Price $<input SIZE=5 type="text" NAME='price' ID='price' DISABLED VALUE='5.00'><BR>
Total: $<SPAN ID=total NAME=total>0.00</SPAN>

Solarpitch · August 14, 2008

Hey thanks for that. Would you be able to help me modify that to suit what I have in the example. Basically each product will have a price, then the quantity will be entered and a total displayed for that product.

Then at the end I will need to calc an overall total.

adam84 · August 14, 2008

show me what you have so far and I will help you out with it

Solarpitch · August 14, 2008

Thanks man,

Ok well I have a function that returns all the products in the database as you can see in the thumbnail I attached in my last post. Here's a snippet of the function that assigns the values to the textfields..

<?php

while(($row = mysql_fetch_row($result)) != false) 
		{

echo "	

.....

<td><input type='text' name='val[".$row[0]."]' style='width:35px;' ID='quant' ONKEYUP='doCalc(this.value);'/></td>
<td><input type='text' name='tot_val[".$row[0]."]' style='width:35px;' ID='tot_val'  /></td>

  </tr>
";

}

?>

Then down the end of the page I want to give an overall total of all of the totals on each product.


<form >
Overall: $<SPAN ID=overall_total NAME=overall_total>0.00</SPAN>
</form>

So if theres 5 products in the result set. Each product will have a price, quantity and total price.

Product 1: €4.00 x 3 -> Total €12

Product 2: €2.00 x 2 -> Total €4

Overall Total: €16

I hope this makes sence. Not sure if you seen the screenshot in my last post but that will show you the idea.

adam84 · August 14, 2008

ok, so are you able to successfully get the total for each product?

Product 1: €4.00 x 3 -> Total €12

???

Solarpitch · August 14, 2008

No,

I can only get working what you supplied in your first post. At the min, all of the quantity fields are linked to the same total textfield.

I hope its not too confusing

adam84 · August 14, 2008

would you be able to post all the code that is in your while loop

Solarpitch · August 14, 2008

Here's the whole function...

<?php

function populate_ordering_products($id)
{



dbconnect();

    $sql = "SELECT * FROM product_spec WHERE category_id = ".$id."";
$result = mysql_query($sql);

			echo "			

<table width='842'>
  <tr>
    <td >Product ID</td>
    <td >Energy</td>
    <td >Brightness</td>
<td >Fitting</td>
<td >Quantity</td>
<td >Info?</td>
  </tr>";

        while(($row = mysql_fetch_row($result)) != false) 
		{

		$product_id = $row[1];
		$product_name = get_productname($product_id);



	     echo "	
  <tr'>
    <td>".$product_name."</td>
    <td>".$row[2]."</td>
    <td>".$row[3]."</td>
    <td>".$row[4]."</td>

       <td><input type='text' name='val[".$row[0]."]' style='width:35px;' ID='quant' ONKEYUP='doCalc(this.value);'/></td>
<td><input type='text' name='tot_val[".$row[0]."]' style='width:35px;' ID='price' DISABLED VALUE='5.00'/></td>
  </tr>
";

		 }


    $myinfo .= "</table>";
    return $myinfo;

}

?>

adam84 · August 14, 2008

no i couldnt see that the attachment. I didnt show up

adam84 · August 14, 2008

Javascript:

function doCalc( index, total ){

var num = document.getElementById('quant'+index).value;
var gTotal = 0;

if( !isNaN( num ) && num != '' )
	document.getElementById('total'+index).innerHTML = (parseFloat(document.getElementById('price'+index).value) * parseInt(num)).toFixed(2);
else
	document.getElementById('total'+index).innerHTML = '0.00';

for(var i = 0; i < total; i++ )
	gTotal += parseFloat(document.getElementById('total'+i).innerHTML);

document.getElementById('vTotal').innerHTML = gTotal.toFixed(2);
}

PHP

<?php

function populate_ordering_products($id){

dbconnect();

$sql = "SELECT * FROM product_spec WHERE category_id = ".$id;
$result = mysql_query($sql);

echo " 

	<table width='842'>
		<tr>
			<td >Product ID</td>
			<td >Energy</td>
			<td >Brightness</td>
			<td >Fitting</td>
			<td >Quantity</td>
			<td >Info?</td>
		</tr>";

		$totalRows = mysql_num_rows( $result );
		$index = 0;

		while(($row = mysql_fetch_row($result)) != false) {

			$product_id = $row[1];
			$product_name = get_productname($product_id);

			echo "<tr>
				<td>".$product_name."</td>
				<td>".$row[2]."</td>
				<td>".$row[3]."</td>
				<td>".$row[4]."</td>

				<td><input type='text' name='val$index' id='val$index' style='width:35px;' ONKEYUP='doCalc($index,$totalRows);'/></td>
				<td><input type='text' name='tot_val$index' id='tot_val$index' style='width:35px;' DISABLED VALUE='5.00'/></td>
			</tr>";

		}

		//I didnt know where you wanted the totals, so I just put it in the last row
		echo "<TR><TD COLSPAN=3><B>Total: $</B> <SPAN NAME=vTotal ID=vTotal>0.00</SPAN></TR>";
	echo "</table>";

}

?>

Hope this helps

Solarpitch · August 14, 2008

Cheers for your help! I'm just trying to get it to work. Here's the screen shot that I was attached...

Is this the way you structured the code... to work like this concept?

adam84 · August 14, 2008

Its similar, the code you gave me didnt have the screw column in it. Or the table formatting.

Solarpitch · August 14, 2008

Yeah I took that out but it shouldn't make a difference anyway. I'll keep banging away at it with what you done for me. I took out the formatting to make it easier for you to read... there was too much code otherwise.

At the min when I put in the quantity on each product.. the corresponding total stays at 0.00. Not sure why.

adam84 · August 14, 2008

did your copy over the new js function I created? Before the doCalc took in three parameters, not it only take in two, an index and total rows

Solarpitch · August 14, 2008

Yeah I copied it over... I have it implemented just as you supplied and I've been trying it a few different ways but no joy. I'll have to take a look at it in another hour, must be something small thats not working.

adam84 · August 14, 2008

Word

Solarpitch · August 14, 2008

Ok.. I have it working except for displaying the overall total.

<?php

....

$index = $row[0];

<td><input type='text' name='val[".$row[0]."]' style='width:35px;' ID='quant".$row[0]."' ONKEYUP='doCalc($index, this.value);' /></td>

<td><input type='text' name='tot_val[".$row[0]."]' style='width:35px;' ID='price".$row[0]."' DISABLED VALUE='5.00' /></td>
<td>€<SPAN style='font-weight:bold; margin-bottom:10px; color:#006699;' ID=total".$row[0]." NAME=total>0.00</SPAN></td>

/>


<SCRIPT>
function doCalc( index, total ){

var num = document.getElementById('quant'+index).value;
var gTotal = 0;

if( !isNaN( num ) && num != '' )
	document.getElementById('total'+index).innerHTML = (parseFloat(document.getElementById('price'+index).value) * parseInt(num)).toFixed(2);
else
	document.getElementById('total'+index).innerHTML = '0.00';

for(var i = 0; i < total; i++ )
	gTotal += parseFloat(document.getElementById('total'+i).innerHTML);

document.getElementById('vTotal').innerHTML = gTotal.toFixed(2);
}
</SCRIPT>

this is what I have at the bottom of the page to display the overall total but I cant get it to calculate the total of all the total fields.

Total: $ 0.00

Solarpitch · August 15, 2008

Actually... all I need to do is to convert this...

Total: $ 0.00

to a textfield. How Can I get this to work if the above total was made into a textfield. I made it into a textfield but the values wont change.

adam84 · August 15, 2008

in the JS function remove the line

gTotal += parseFloat(document.getElementById('total'+i).innerHTML);

and try

alert( document.getElementById('total'+i).innerHTML );

See you if are getting a value?

Solarpitch · August 15, 2008

I changed that but no alert poped up

<?php


$index = $row[0];

<td><input type='text' name='val[".$row[0]."]' style='width:35px;' ID='quant".$row[0]."' ONKEYUP='doCalc($index, this.value);' /></td>
<td><input type='text' name='tot_val[".$row[0]."]' style='width:35px;' ID='price".$row[0]."' DISABLED VALUE='5.00' /></td>

//The values are calculating and changing in this perfectly when the user enters a value into the quantity field. 
//But I need the below total to be a textfield. 
//The reason being because I need to submit the form and store all the values into an array and it doesnt seem to store the values when the total is set like below...

<td>€<SPAN style='font-weight:bold; margin-bottom:10px; color:#006699;' ID=total".$row[0]." NAME=total>0.00</SPAN></td>

//Needs to be like this... but when i change it to this, the value wont change in the textfield

<td><input type='text' name='total[".$row[0]."]' style='width:35px;' ID='total".$row[0]."' value='0.00' /></td>

?>

adam84 · August 15, 2008

Instead of

$index = $row[0];

Just leave it at 0 and increase the value

$index = 0;

while{

..

$index++;

}

Solarpitch · August 15, 2008

Thanks for your help with this again.

I need to direct value of $row[0] though for other parts of the application. But either way, it should work. The problem is the code cant get the total value because its not being displayed in a textfield.

Dont suppose you know whats up with that? :-\

adam84 · August 15, 2008

Can you show me you html source code, I would be able to get a better idea of what the problem is by looking at the.

Solarpitch · August 15, 2008

I did yeah. Its all working fine. The total on each product fields are being calculated fine. But when I use an array to get all the values of the totals, it wont grab them because total is not a textfield.

Do you know how to convert this part...

<td>€<SPAN style='font-weight:bold; margin-bottom:10px; color:#006699;' ID=total".$row[0]." NAME=total>0.00</SPAN></td>

to this..

<td><input type='text' name='total[".$row[0]."]' style='width:35px;' ID='total".$row[0]."' value='0.00' /></td>

and get it to work in the JS?

Sign In

Calculating a total in a textfield?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information