Modificar (jQuery) JS para incluir código para controlar alterações feitas na caixa de seleção e Dropdown lista e preço atualização
-
18-09-2019 - |
Pergunta
Eu tenho um código javascript e eu estou usando jQuery Cálculo plug-in (pode ser descarregado a partir de link texto ). A forma que eu tenho é uma espécie de carrinho de compras forma ou seja, a atualização dos preços de acordo com a quantidade inserida. O formulário tem caixas de texto que aceita números e isso denota a quantidade. Uma vez que esta quantidade é inserido / modificado, o preço para o mesmo é atualizado e, ao mesmo tempo, o total geral também é atualizado. Atualmente, ele só permite que o trabalho me com caixas de texto. Eu quero ser capaz de usar listas de caixas e suspensa na forma e quer que o código JS para lidar com a actualização do preço e o total geral e mostrá-la imediatamente (assim como faria no caso das caixas de texto existentes atuais). Eu tentei isso no meu localhost mas acabaram quebrando a funcionalidade atual ou o código atualizado simplesmente não funciona para as listas de caixas e suspensa.
A forma que eu tenho até agora é:
<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>
Além disso, como você pode ver o código do formulário acima, as tabelas são usadas nele. Existe uma maneira de conseguir o que eu estou tentando fazer sem usar tabelas?
Obrigado a todos com antecedência.
Solução
Não é uma resposta real. Apenas algumas notas que não se encaixam em um comentário.
Eu tenho um sentimento de que você acabou de fazer alguma cópia colar e não têm compreensão real como este cálculo plugin funciona. E agora querem alguém para descobrir isso.
Apenas alguns exemplos:
-
você incluiu várias funções (min, max, avg) que você não usa e os elementos para mostrar esses valores também estão em falta.
-
seu código de cálculo é configurado para verificar
input
s onde osname
attribute começa comqty_item_
mas seucheckbox
eselect
têm um atributo de nome completamente diferente. -
o recálculo está ligada principalmente ao evento
keyup
que claramente não vai fogo contracheckbox
eselect
menos que o usuário usa o teclado em vez do mouse para selecionar os valores -
Você não parece estar usando o jQuery Campo Plugin embora o cálculo do plugin estados homepage que você precisa se você quiser usar as entradas diferentes de
text
Mas porque você me apanhou de bom humor eu fiz um simples trabalho de demonstração página para você com base em seu código.
Mas eu não vou explicar isso mais longe, também checagens (permitem apenas números inteiros positivos) estão faltando e outras coisas.