Как реализовать зависимые поля ввода Jquery?

Я строю систему счетов-фактур, где название товара и цена извлекаются из базы данных. Цена зависит от наименования товара.

Теперь я должен сделать это.

Price: <Input type="text" id="price" name="price" />
Qty : <Input type="text" id="qty" name="qty" />
Tax : <Input type="text" id="tax" name="tax" />
Discount : <Input type="text" id="disc" name="disc" />
Total : <Input type="text" id="total" name="total"  value=" echo $total;"/>

Я хочу, чтобы автозаполнение всего поля ввода без перезагрузки с этой формулой

<?Php
$total = $price * $qty + $tax - $disc;
?>

1

Решение

нужно назначить класс в вашем HTML, и некоторые JQuery скрипт,

//Assign Amount class in your 4 html fields

Price: <Input type="text" id="price" name="price" class="amount" />
Qty : <Input type="text" id="qty" name="qty" class="amount"/>
Tax : <Input type="text" id="tax" name="tax" class="amount"/>
Discount : <Input type="text" id="disc" name="disc" class="amount"/>
Total : <Input type="text" id="total" name="total"  value=" echo $total;"/>

$( document ).ready(function() {
$('input.amount').keyup(function(){
var price = $("#price").val();
var qty = $("#qty").val();
var tax = $("#tax").val();
var disc = $("#disc").val();
var total = $("#total").val();
total = ((parseFloat(price) * parseFloat(qty) + parseFloat(tax) - parseFloat(disc);
$("#total").val(parseFloat(total));
});
});
4

Другие решения

Должно быть как,

  $( document ).ready(function() {
$('input.amount').keyup(function(){
var price = $("#price").val();
var qty = $("#qty").val();
var tax = $("#tax").val();
var disc = $("#disc").val();
var total = $("#total").val();
var total = (parseFloat(price) * parseFloat(qty)) + (parseFloat(tax) - parseFloat(disc));
$("#total").val(parseFloat(total));
});
});
2

Price: <Input type="text" class="changing" id="price" name="price" />
Qty : <Input type="text" class="changing" id="qty" name="qty" />
Tax : <Input type="text" class="changing" id="tax" name="tax" />
Discount : <Input type="text" class="changing" id="disc" name="disc" />

$('input[class^=changing]').on('change', function() {
var total = $('#price').val() * $('#qty').val() + $('#tax').val() - $('#disc').val();
$('#total').val(total);

});

Вы можете использовать Jquery для просмотра изменений в таких полях, как цена, кол-во, налог и скидка, а также изменять общую стоимость при каждом ее изменении.

1

Вы можете использовать jquery для математики, но вам нужен ajax для загрузки данных из вашей базы данных.

как только все ваши данные о конкретном продукте загружены, вы можете использовать этот код JQuery ниже

<script>
$("#qty, #disc").change(function(){
$("#total").val( $("#price").val() * $("#qty").val() + $("#tax").val() - $("#disc").val() )
});
</script>
1
По вопросам рекламы ammmcru@yandex.ru
Adblock
detector