Answer the question
In order to leave comments, you need to log in
The amount in the input does not change, why?
Good evening!
The site has a mini-shop. There is a discount system, if the quantity is more than 12, then the price changes, but it has changed only externally, when adding a product, the price does not change. Why? What's wrong?
Here is this page:
An example of a cell with a product:
<tr>
<td><img src="img/order/ballon.png" alt="НПУ POLYNOR"></td>
<td><span id="cena">280</span>
<div class="number">
<span style="user-select: none;padding:3px 9px 3px 9px;" class="minus">-</span>
<input style="user-select: none;background-color: #fff;" id="inp" type="text" value="0" size="5" />
<span style="user-select: none;" class="plus">+</span>
</div>
</td>
</tr>
$(function() {
var table = $(".order-table"),
div = table.find(".number"),
input = div.find("input").get(),
total = $(".order-end-form>input:text");
function sum() {
var n = input.reduce(function(s, el) {
var val = +el.value || 0,
price = +el.dataset.price || 0;
val < 0 && (val = 0);
return s + val * price
}, 0);
total.val(n)
}
div.each(function(indx, el) {
var price = parseInt($(el).prev().text()),
input = $("input", el).on({
input: sum
})[0];
input.dataset.price = price;
$(el).on("click", ".minus, .plus", function(event) {
val = +input.value || 0;
$(event.target).is(".minus") ?
val-- : val++;
val < 0 && (val = 0);
input.value = val;
sum()
})
})
});
<script>
function cena(){
var a = .find(el => el[0] <= (+inp.value||1)),
cena = document.querySelector("#cena");
cena.textContent = a[1];
cena.style.color = a[2];
};
document.querySelector('#inp').addEventListener("input", cena, false);
document.body.addEventListener("click", cena, false);
window.addEventListener("DOMContentLoaded", cena, false);
</script>
Answer the question
In order to leave comments, you need to log in
You don't have links anywhere to the field in which the price would be sent to the server or used to interact with other blocks, except for the price output block.
All that the price replacement function does is change the content of this block:
The line responsible for selecting this particular block:
If it is required that the price be changed somewhere else or sent to the server. Then we can let's make a hidden field in the form. Which will be changed by this script, while it itself will not be visible and not available to be changed by the user. <span id="cena">280</span>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question