Ändern (jQuery) JS enthält Code-Änderungen auf Checkbox und Dropdown-Liste und Update-Preis getan zu verfolgen
-
18-09-2019 - |
Frage
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.
Lösung
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
input
s zu prüfen, wo diename
attribute mitqty_item_
beginnen aber Ihrecheckbox
undselect
haben ein ganz anderes Namensattribut. -
die Neuberechnung vor allem auf das
keyup
Ereignis gebunden ist, die eindeutig nicht aufcheckbox
ausgelöst werden undselect
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.
Aber ich werde es nicht weiter erklären, auch Plausibilitätsprüfungen (erlauben nur positive ganze Zahlen) fehlen und andere Sachen.