Modify (jQuery) JS to include code to track changes done on Checkbox and Dropdown list and update price

Question

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.

Answer 1

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.