Jump to content

Calculating a total in a textfield?


Solarpitch

Recommended Posts

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

 

example50uz4.th.gif

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

}

?>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

<B>Total: $</B> <SPAN ID=vTotal NAME=vTotal>0.00</SPAN>

Link to comment
Share on other sites

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

 

<B>Total: $</B> <SPAN ID=vTotal NAME=vTotal>0.00</SPAN>

 

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.

 

Link to comment
Share on other sites

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>

?>

Link to comment
Share on other sites

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?  :-\

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.