Modifier (jQuery) JS pour inclure du code pour suivre les changements effectués sur cases à cocher et liste déroulante et prix de mise à jour

StackOverflow https://stackoverflow.com/questions/1881824

Question

J'ai un code javascript et j'utilise le plugin de calcul jQuery (peut être téléchargé à partir de texte lien). La forme que j'ai est un peu comme le shopping sous forme de panier à savoir les prix mise à jour en fonction de la quantité saisie. La forme a des zones de texte qui accepte les numéros et cela indique la quantité. Une fois que cette quantité est entrée / modifiée, le prix pour le même est mis à jour et en même temps, le grand total est également mis à jour. À l'heure actuelle, il me permet de ne travailler avec des zones de texte. Je veux être en mesure d'utiliser cases à cocher et les listes déroulantes sous la forme et que vous voulez le code JS pour gérer la mise à jour du prix et le grand total et afficher instantanément (comme il le ferait dans le cas des zones de texte existant en cours). J'ai essayé sur mon localhost mais je a fini briser les fonctionnalités actuelles ou le code mis à jour ne fonctionne pas pour les listes à cocher et menu déroulant.

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>

De même que vous pouvez voir le code de formulaire ci-dessus, les tables sont utilisées en elle. Y at-il de toute façon d'obtenir ce que je suis en train de le faire sans utiliser les tables?

Merci à vous tous à l'avance.

Était-ce utile?

La solution

Pas une vraie réponse. Juste quelques notes qui ne rentrent pas dans un commentaire.

J'ai le sentiment que vous venez de faire une pâte de copier et ne comprend pas vraiment comment ce plugin de calcul fonctionne. Et veulent maintenant quelqu'un d'autre pour le comprendre.

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 inputs où le nameattribute commence par qty_item_ mais votre checkbox et select ont un attribut de nom complètement différent.

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

  • vous ne semblez pas en utilisant le jQuery Champ Plugin bien que la plugin calcul états page d'accueil que vous avez besoin si vous voulez utiliser les différentes entrées de text

Mais parce que tu me attrapées dans une bonne humeur j'ai fait une page de démonstration de travail simple pour vous en fonction de votre code.

http://jsbin.com/asepe3

Mais je ne l'expliquer plus loin, aussi des contrôles de santé d'esprit (ne permettent que des nombres entiers positifs) sont portés disparus et d'autres choses.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top