Modifier (JQuery) JS pour inclure le code pour suivre les changements effectués sur Checkbox et liste déroulante et mettre à jour le prix

Question

J'ai un code en javascript et j'utilise jQuery Calculation plugin (peut être téléchargé à partir de link text). Le formulaire que j'ai est un peu comme un panier d'achat, c'est-à-dire que les prix sont mis à jour en fonction de la quantité saisie. Le formulaire a des zones de texte qui accepte les nombres et cela indique la quantité. Une fois que cette quantité est entrée/modifiée, le prix de celle-ci est mis à jour et en même temps, le total général est également mis à jour. Actuellement, il me permet seulement de travailler avec des zones de texte. Je veux pouvoir utiliser les cases à cocher et les listes déroulantes du formulaire et je veux que le code JS gère la mise à jour du prix et du total général et l'affiche instantanément (comme dans le cas des zones de texte existantes). J'ai essayé ceci sur mon localhost mais j'ai fini de casser la fonctionnalité actuelle ou le code mis à jour ne fonctionne tout simplement pas pour les listes de cases à cocher et de liste déroulante.

La forme que j'ai à ce jour est:

<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> 

également que vous pouvez voir le code de formulaire ci-dessus, les tables sont utilisées en elle. Est-il possible de réaliser ce que j'essaie de faire sans utiliser de tables?

Merci d'avance.

Answer 1

Pas une vraie réponse. Juste quelques notes qui ne correspondent pas à un commentaire. J'ai l'impression que vous venez de faire une copie de pâte et que vous n'avez pas vraiment compris comment fonctionne ce plugin de calcul. Et maintenant, je veux que quelqu'un d'autre le découvre.

Juste quelques exemples:

• vous avez inclus plusieurs fonctions (min, max, moyenne) que vous n'utilisez pas et les éléments à afficher ces valeurs manquent également.

• votre code de calcul est configuré pour vérifier input s où l'attribut name commence par qty_item_ mais votre checkbox et select ont un attribut de nom complètement différent.

• le recalcul est principalement lié à l'air l'événement keyup qui manifestement pas le feu sur checkbox et select à moins que l'utilisateur utilise le clavier au lieu de la souris pour sélectionner les valeurs

• vous ne pas être en utilisant la jQuery Field Plugin bien que la page d'accueil du plugin de calcul indique que vous avez besoin si vous voulez utiliser les différentes entrées de text

---

Mais parce que vous m'avez attrapé de bonne humeur, j'ai fait une simple page de démonstration pour vous basée sur votre code.

http://jsbin.com/asepe3

Mais je ne l'expliquer plus loin, vérifie également sanity (autoriser uniquement des nombres entiers positifs) sont portés disparus et d'autres choses.