Измените (jQuery) JS, включив в него код для отслеживания изменений, внесенных в флажок и раскрывающийся список, а также обновите цену.
-
18-09-2019 - |
Вопрос
У меня есть код на JavaScript, и я использую плагин jQuery Calculation (можно загрузить с сайта текст ссылки).Форма, которая у меня есть, похожа на форму корзины покупок, т.е.цены обновляются в соответствии с введенным количеством.В форме есть текстовые поля, которые принимают цифры и обозначают количество.После ввода/изменения этого количества цена на него обновляется, и в то же время обновляется и общая сумма.В настоящее время он позволяет мне работать только с текстовыми полями.Я хочу иметь возможность использовать флажки и раскрывающиеся списки в форме и хочу, чтобы код JS обрабатывал обновление цены и общей суммы и мгновенно показывал ее (так же, как это было бы в случае с текущими существующими текстовыми полями).Я попробовал это на своем локальном хосте, но я закончил нарушать текущую функциональность, или обновленный код просто не работает для флажков и раскрывающихся списков.
Форма, которая у меня есть до сих пор:
<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>
Также, как вы можете видеть в приведенном выше коде формы, в ней используются таблицы.Есть ли способ добиться того, чего я пытаюсь сделать, без использования таблиц?
Спасибо всем заранее.
Решение
Не настоящий ответ.Всего несколько замечаний, не вписывающихся в комментарий.
У меня такое ощущение, что вы только что скопировали и не совсем понимаете, как работает этот плагин вычислений.И теперь хочу, чтобы кто-то другой это понял.
Всего несколько примеров:
вы включили несколько функций (min, max, avg), которые вы не используете, и элементы для отображения этих значений также отсутствуют.
ваш код расчета настроен на проверку
input
гдеname
атрибут начинается сqty_item_
но твойcheckbox
иselect
имеют совершенно другой атрибут имени.перерасчет в основном связан с
keyup
событие, которое явно не сработаетcheckbox
иselect
если пользователь не использует клавиатуру вместо мыши для выбора значенийвы, кажется, не используете Плагин поля jQuery хотя на домашней странице плагина расчета указано, что он вам нужен, если вы хотите использовать входные данные, отличные от
text
Но поскольку вы застали меня в хорошем настроении, я сделал для вас простую рабочую демо-страницу на основе вашего кода.
Но я не буду это объяснять дальше, также отсутствуют проверки работоспособности (допускаются только положительные целые числа) и другие вещи.