计算数量和价格输出jquery

Question

Is there a way for me to display the price by its number of qty & when i input a number in its input text Here is my js code for minus and plus symbol with its input type text

My input text

$(".input-number").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) || 
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });

Here is the html code & js

I would like to display the price by its qty in my <h3 class>Total : </h3

 $('.btn-number').click(function(e) { e.preventDefault(); fieldName = $(this).attr('data-field'); type = $(this).attr('data-type'); var input = $("input[name='" + fieldName + "']"); var currentVal = parseInt(input.val()); if (!isNaN(currentVal)) { if (type == 'minus') { if (currentVal > input.attr('min')) { input.val(currentVal - 1).change(); } if (parseInt(input.val()) == input.attr('min')) { //$(this).attr('disabled', true); } } else if (type == 'plus') { if (currentVal < input.attr('max')) { input.val(currentVal + 1).change(); } if (parseInt(input.val()) == input.attr('max')) { // $(this).attr('disabled', true); } } } else { input.val(0); } }); $('.input-number').focusin(function() { $(this).data('oldValue', $(this).val()); }); $('.input-number').change(function() { minValue = parseInt($(this).attr('min')); maxValue = parseInt($(this).attr('max')); valueCurrent = parseInt($(this).val()); name = $(this).attr('name'); if (valueCurrent >= minValue) { $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled') } else { alert('Sorry, the minimum value was reached'); $(this).val($(this).data('oldValue')); } if (valueCurrent <= maxValue) { $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled') } else { alert('Sorry, the maximum value was reached'); $(this).val($(this).data('oldValue')); } }); $(".input-number").keydown(function(e) { // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 || // Allow: Ctrl+A (e.keyCode == 65 && e.ctrlKey === true) || // Allow: home, end, left, right (e.keyCode >= 35 && e.keyCode <= 39)) { // let it happen, don't do anything return; } // Ensure that it is a number and stop the keypress if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); } });

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="input-group col-xs-2"> <span class="input-group-btn"> <button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="quant[2]"> <span class="fa fa-minus"></span> </button> </span> <input type="text" name="quant[2]" class="form-control input-number" value="1" min="1" max="10"> <span class="input-group-btn"> <button type="button" class="btn btn-success btn-number" data-type="plus" data-field="quant[2]"> <span class="fa fa-plus"></span> </button> </span> </div> <h3 class="bookingroom">Total: PHP 2,750.00</h3>

Answer 1

You can try editing text in h3 tag. Put this in your input onChange function.

$('.input-number').change(function() {
    // previous code...
    let initialValue = $(this).data('price');
    let price = valueCurrent * initialValue;
    $('h3.bookingroom').text('Total: ' + price);
});

You can get initial value from h3 previous text or a better idea is to add a data tag with the price the input

<input type="text" class="form-control input-number"
       name="quant[2]" 
       value="1" 
       min="1" 
       max="10" 
       data-price="2750" />