Jump to content

jQuery and PHP autocalculation question!!!

Swissv2

By Swissv2
in PHP Coding Help

Recommended Posts

Swissv2 Newbie

Swissv2

Posted
Posted

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_]")
},

 

Link to comment
https://forums.phpfreaks.com/topic/233127-jquery-and-php-autocalculation-question/
Share on other sites
dcro2 Newbie

dcro2

Posted
Posted

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>

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • 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.