Ändern (jQuery) JS enthält Code-Änderungen auf Checkbox und Dropdown-Liste und Update-Preis getan zu verfolgen

Question

ich einen Code in Javascript und ich jQuery Plugin Berechnung verwenden (kann von link text ). Das Formular, das ich habe, ist eine Art, wie Warenkorb Form das heißt, die Preise Update entsprechend der Menge eingegeben. Das Formular enthält Textfelder, die Zahlen akzeptiert und dies bezeichnet die Menge. Sobald diese Menge eingegeben / verändert, wird der Preis für die gleiche aktualisiert und zugleich wird die Gesamtsumme ebenfalls aktualisiert. Derzeit lässt mich nur mit Textfeldern arbeiten. Ich möchte in der Lage sein, Ankreuzfelder und Auswahllisten in Form zu verwenden und möchten Sie den Code JS zu handhaben, den Preis zu aktualisieren und die Gesamtsumme und zeigt es sofort (wie es bei den aktuellen vorhandenen Textfeldern tun würde). Ich habe versucht, diese auf meinem localhost, aber ich habe ended Zerschlagung aktuelle Funktionalität oder der aktualisierte Code funktioniert einfach nicht für die Ankreuzfelder und Auswahllisten.

Die Form, die ich bisher habe, ist:

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

Auch, wie Sie das obige Formular Code sehen können, Tabellen werden darin verwendet. Gibt es trotzdem zu erreichen, was ich versuche, ohne Verwendung von Tabellen zu tun?

Vielen Dank im Voraus.

Answer 1

Nicht eine wirkliche Antwort. Nur ein paar Hinweise, die passen nicht in einen Kommentar.

Ich habe das Gefühl, dass Sie nur einige Kopie Paste haben und habe kein wirkliches Verständnis, wie diese Berechnung Plugin funktioniert. Und jetzt will jemand anderes, es herauszufinden.

Nur ein paar Beispiele:

• Sie haben mehrere Funktionen enthalten (min, max, avg), die Sie nicht verwenden und die Elemente diese Werte angezeigt werden ebenfalls fehlen.

• Ihr Berechnungscode ist so konfiguriert, für inputs zu prüfen, wo die nameattribute mit qty_item_ beginnen aber Ihre checkbox und select haben ein ganz anderes Namensattribut.

• die Neuberechnung vor allem auf das keyup Ereignis gebunden ist, die eindeutig nicht auf checkbox ausgelöst werden und select es sei denn, der Benutzer die Tastatur anstelle der Maus verwendet, um die Werte wählen

• Sie scheinen nicht die jQuery Plugin Feld zu verwenden obwohl die Homepage Staaten Berechnung Plugin, dass Sie es brauchen, wenn Sie von text verschiedene Eingaben verwenden möchten

---

Aber weil du mich in einer guten Stimmung eingefangen habe ich eine einfache Arbeits Demo-Seite für Sie basierend auf Ihrem Code.

http://jsbin.com/asepe3

Aber ich werde es nicht weiter erklären, auch Plausibilitätsprüfungen (erlauben nur positive ganze Zahlen) fehlen und andere Sachen.