views:

351

answers:

1

Hi all, I have a code in javascript and I am using jQuery Calculation plugin (can be downloaded from link text). The form that I have is kind of like shopping cart form i.e. the prices update according to the quantity entered. The form has text boxes which accepts numbers and this denotes the quantity. Once this quantity is entered/modified, the price for the same is updated and at the same time, the grand total is also updated. Currently, it only lets me work with text boxes. I want to be able to use Checkboxes and Dropdown lists in the form and want the JS code to handle updating the price and the grand total and show it instantly (just as it would do in case of the current existing text boxes). I tried this on my localhost but I have ended breaking up current functionality or the updated code just does not work for the Checkboxes and Dropdown lists.

The form that I have so far is:

 <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.calculation.js" type="text/javascript"></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);
  // run the calculation function now
  recalc();

  // automatically update the "#totalSum" field every time
  // the values are changes via the keyup event
  $("input[name^=sum]").sum("keyup", "#totalSum");

  // automatically update the "#totalAvg" field every time
  // the values are changes via the keyup event
  $("input[name^=avg]").avg({
   bind:"keyup"
   , selector: "#totalAvg"
   // if an invalid character is found, change the background color
   , onParseError: function(){
    this.css("backgroundColor", "#cc0000")
   }
   // if the error has been cleared, reset the bgcolor
   , onParseClear: function (){
    this.css("backgroundColor", "");
   }
  });

  // automatically update the "#minNumber" field every time
  // the values are changes via the keyup event
  $("input[name^=min]").min("keyup", "#numberMin");

  // automatically update the "#minNumber" field every time
  // the values are changes via the keyup event
  $("input[name^=max]").max("keyup", {
   selector: "#numberMax"
   , oncalc: function (value, options){
    // you can use this to format the value
    $(options.selector).val(value);
   }
  });

  // this calculates the sum for some text nodes
  $("#idTotalTextSum").click(
   function (){
    // get the sum of the elements
    var sum = $(".textSum").sum();

    // update the total
    $("#totalTextSum").text("$" + sum.toString());
   }
  );

  // this calculates the average for some text nodes
  $("#idTotalTextAvg").click(
   function (){
    // get the average of the elements
    var avg = $(".textAvg").avg();

    // update the total
    $("#totalTextAvg").text(avg.toString());
   }
  );
 }
);

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

  },
  // 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> 



<form name="form1" method="post" action="">

<div id="formContent">

  <P id="ex-sum">
  <table width="500">
       <COL style="width: 50px;">
       <COL>
       <COL style="width: 60px;">
       <COL style="width: 110px;">
       <tbody><tr>
        <th width="179">
         Qty
        </th>
        <th width="164" align="left">
         Product
        </th>
        <th width="72">
         Price
        </th>
        <th width="65">
         Total
        </th>
       </tr>
       <tr>
        <td align="center">
         <INPUT name="qty_item_1" type="text" class="input" id="qty_item_1" value="1" size="5">
         </td>
        <td>Table</td>
        <td align="center" id="price_item_1">
         $150
        </td>
        <td align="center" id="total_item_1">$</td>
       </tr>
       <tr>
        <td align="center">
         <INPUT name="qty_item_2" type="text" class="input" id="qty_item_2" size="5">
         </td>
        <td>
         Pencil</td>
        <td align="center" id="price_item_2">
         $100</td>
        <td align="center" id="total_item_2">$</td>
       </tr>
       <tr>
        <td align="center">
         <INPUT name="toys" type="checkbox" id="toys" value="1">
              </td>
         <td>
         Toys</td>
        <td align="center" id="price_item_3">
         $50</td>
        <td align="center" id="total_item_3">$</td>
       </tr>  

              <tr>
        <td align="center"><select name="books" id="books">
          <option selected="selected">Select an option</option>
          <option value="1">Book1</option>
          <option value="1">Book2</option>
          <option value="1">Book3</option>
           </select></td>
         <td>
         Books</td>
        <td align="center" id="price_item_3">
         $10</td>
        <td align="center" id="total_item_3">$</td>
       </tr>

       <tr>
        <td colspan="3" align="right">
         <STRONG>Grand Total:</STRONG>
        </td>
        <td align="center" id="grandTotal">$</td>
       </tr>
      </tbody></table>
</div>

</form>

Also as you can see the above form code, tables are used in it. Is there anyway to achieve what I am trying to do without using tables?

Thank you all in advance.

+2  A: 

Not a real answer. Just a few notes which don't fit into a comment.

I have a feeling that you just did some copy paste and have no real understanding how this calculation plugin works. And now want someone else to figure it out.

Just a few examples:

  • you have included several functions (min, max, avg) which you don't use and the elements to display those values are also missing.

  • your calculation code is configured to check for inputs where the nameattribute starts with qty_item_ but your checkbox and select have a completely different name attribute.

  • the recalculation is mainly bound to the keyup event which clearly won't fire on checkbox and select unless the user uses the keyboard instead of the mouse to select the values

  • you don't seem to be using the jQuery Field Plugin although the calculation plugin homepage states that you need it if you want to use inputs different from text


But because you catched me in a good mood I made a simple working demo page for you based on your code.

http://jsbin.com/asepe3

But I won't explain it any further, also sanity checks (allow only positive integer numbers) are missing and other stuff.

jitter
You're right about copypasting. Googling `"// bind the recalc function to the quantity fields"` gives lot of hits :)
BalusC
@jitterFirstly, let me thank you for taking time to visit the post and I truly appreciate for putting together the working demo. As hinted from your earlier comments, I do accept that I am a new kid on the block of jQuery. I am very new to jquery and I am trying to take help of already existing examples to ease up the understanding process. Yes, I have been experimenting with the form and within that course, I got the new elements in place and that's why you have found even unrelated code. The credit of the original code goes to the author and the credit of the solution goes to you.
Devner
@jitterI will make further effort on my end to learn more about this fantastic JS framework. I am a slow learner but eventually I get there. I do also thank you for pointing out the checks that must be done. I had that in mind and I am working on some regex patterns for the same. I will check out the code that you have provided and will try to figure it out. That way I hope to learn more. Thanks a ton again!@BalusC Thanks for visiting the post. Hope this solution would help you anytime. If you ever use this solution and have some spare time, please do credit jitter for the same.
Devner