jQuery and PHP autocalculation question!!!

Swissv2 · April 8, 2011

I downloaded a jQuery auto calculation script, which dynamically calculates a row total then finally SUMs the grand total, and I need to add just two features to it.

1st feature: How can I assign a read-only textbox for the "Grand Total"?
2nd feature: How can I auto-calculate the "buy used?" column, and reflect the result in the sub-total column?

You can view and download the script example here

http://www.mugnets.com/calcscript/

To use: Just type in any number into the "Qty" field, and you will see the auto-calculation work.

First, the Grand Total is associated to display to an ID tag, but I want to re-associate the Grand Total to display to a read-only input box.

function ($this){
// sum the total of the $("[id^=total_item]") selector
var sum = $this.sum();

$("#grandTotal").text(
	// round the results to 2 digits
	"$" + sum.toFixed(2)
);
}

Second, the price and quantity is calculated dynamically. I would like to add the "buy used" discount item to it also. Here is the modification that I would like to get to work

// the equation to use for the calculation
"qty * price * discount",
// define the variables used in the equation, these can be a jQuery object
{
qty: $("input[name^=qty_item_]"),
price: $("[id^=price_item_]"),
        discount: $("[id^=special_]")
},

Psycho · April 8, 2011

Do NOT rely upon values calculated by JavaScript. They are fine for displaying the total to the user, but if you hide/disable/mare readonly, a user can still manipulate the value that is sent to the processing page.

Swissv2 · April 8, 2011

mjdamato - no worries, I am using PHP functions to handle/process the data. This javascript is just dynamically displaying the data

dcro2 · April 8, 2011

Your link is quite broken, dear sir/madam.

Swissv2 · April 8, 2011

Oops! Here's a link that (hopefully) works.

http://www.psopowersavings.com/calcscript/

Swissv2 · April 12, 2011

Bump...

dcro2 · April 12, 2011

This is the only way I could get it to work. Can't explain how right now, but I think you'll get the gist of it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jQuery Calculation Plug-in</title>
<style type="text/css">
<!--
#formContent {
width:100%;
margin:auto;
}
#formContent p {
clear: both;
min-height: 20px;
}
table td, th, input {
padding: 5px;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
border:1px solid #E2E2E2;
}
input {
border:1px solid #333;
}
thead {
background-color:#003366;
color:#FFF;
}
tfoot {
color:#036;
font-weight:bold;
}
fieldset {
width:600px;
margin:auto;
}
legend {
font-weight:bold;
}
-->
</style>
<!---// load jQuery //--->
<script type="text/javascript" src="js/jquery.js"></script>
<!--// load jQuery plugin //-->
<script type="text/javascript" src="js/jquery.calculation.min.js"></script>
<script type="text/javascript">
var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
	function (){
		// update the plug-in version
		$("#idPluginVersion").text($.Calculation.version);

	// bind the recalc function to the quantity fields
		$("input[name^=qty_item_]").bind("keyup", recalc);
		$("input[name^=special_]").change(recalc);
		// run the calculation function now
		recalc();
	}
);	
function recalc(){
	$("[id^=total_item]").calc(
		// the equation to use for the calculation
		"qty * (price * reduction)",
		// define the variables used in the equation, these can be a jQuery object
		{
			qty: $("input[name^=qty_item_]"),
			price: $("[id^=price_item_]"),
			reduction: $("input[name^=special_]:checked")
		},
		// define the formatting callback, the results of the calculation are passed to this function
		function (s){
			// return the number as a dollar amount
			return "$" + s.toFixed(2);
		},
		// define the finish callback, this runs after the calculation has been complete
		function ($this){
			// sum the total of the $("[id^=total_item]") selector
			var sum = $this.sum();

			$("#grandTotal").text(
				// round the results to 2 digits
				"$" + sum.toFixed(2)
			);
		}
	);
}
</script>
</head>
<body>
<form action="" method="post" id="frmCreateCheckboxRange" onSubmit="return false;">
  <fieldset>
    <legend>Row and Column Calculation Example</legend>
    <div id="formContent">      
      <p id="ex-calc">       
        The example below shows how the calculation plug-in can be used
        to dynamically calculate values. All of the "Total" values
        (including the "Grand Total") are calculated automatically using
        the calc() method. ( <a href="jqueryCalc.zip">Download this example</a> ) <br /><br /><b><u>Added feature</u></b><br />
        <i>If "Used" has been checked "yes", then automatically add 10% discount to line item total. </i></p>
      <table width="100%" cellpadding="1" cellspacing="0">
        <col style="width: 50px;">
        <col>
        <col style="width: 110px;">
        <col style="width: 60px;">
        <col style="width: 90px;">
        <thead>
          <tr>
            <th>Qty</th>
            <th align="left">Item</th>
            <th>Buy Used?</th>
            <th>Price</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td align="center"><input name="qty_item_1" type="text" id="qty_item_1" style="text-align:center;" value="1" size="2" maxlength="4"></td>
            <td><a href="#">The Big Bad Monkey Suit</a></td>
            <td><div align="center"> Yes
                <input name="special_1" type="radio" value=".9" />
                No
                <input name="special_1" type="radio" value="1" checked="checked" />
              </div></td>
            <td id="price_item_1" align="center"> $39.99 </td>
            <td align="center"><input name="total_item_1" type="text" id="total_item_1" style="text-align:right;" value="$39.99" size="7" maxlength="8" readonly="readonly"></td>
          </tr>
          <tr>
            <td align="center"><input name="qty_item_2" type="text" id="qty_item_2" style="text-align:center;" value="1" size="2" maxlength="4"></td>
            <td><a href="#">Foobar's Penguin Helmet</a></td>
            <td><div align="center"> Yes
                <input name="special_2" type="radio" value=".9" />
                No
                <input name="special_2" type="radio" value="1" checked="checked" />
              </div></td>
            <td id="price_item_2" align="center"> $14.99 </td>
            <td align="center"><input name="total_item_2" type="text" id="total_item_2" style="text-align:right;" value="$14.99" size="7" maxlength="8" readonly="readonly"></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4" align="right" style="border:1px solid white;"><strong>Grand Total:</strong></td>
            <td id="grandTotal" align="center" style="border:1px solid white;">$54.98</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </fieldset>
</form>
</body>
</html>

Sign In

jQuery and PHP autocalculation question!!!

Recommended Posts

Swissv2

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Swissv2

Link to comment

Share on other sites

dcro2

Link to comment

Share on other sites

Swissv2

Link to comment

Share on other sites

Swissv2

Link to comment

Share on other sites

dcro2

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information