How to dynamically change the price and incrementing the input number

I used the append function of jquery to transfer value to other side. so i append input type number which the value automatically equal to 1.

The question if I increment the value of input type number how the price double if i increase the value of number?

blade

@foreach($service->invoices as $invoice)
    <tr>
        <td class="text-right">{{ $invoice->description }}</td>
        <td>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
                <label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
            </div>
        </td>
        <td>
            <div class="form-row justify-content-center">
                <div class="form-group mb-0">
                    <div class="input-group mx-auto mb-0">
                        <div class="number-input amount">
                            <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" id="decrease"></button>
                            <input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
                            <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus" id="increment"></button>
                        </div>
                    </div>
                </div>
            </div>
        </td>
        <td class="cost">{{ $invoice->price }}
        <td class="total"></td>
    </tr>
@endforeach

script.js

<script>
    $('.amount > input[type="number"]').on('input', updateTotal);

    function updateTotal(e){
        var amount = parseInt(e.target.value);

        if (!amount || amount < 0)
            return;

        var $parentRow = $(e.target).parent().parent();
        var cost = parseFloat($parentRow.find('.cost').text());
        var total = (cost * amount).toFixed(2);

        $parentRow.find('.total').text(total);
    }
</script>

My input number is like this.

bobbybouwmann

5 years ago

Level 88

Well, you already calculated the total price in your script, right? For the row, you have to the same thing,

It sounds to me that you didn't write this code, but you need to modify it to make it work for your needs. Working on these kind of things requires some knowledge.

shahr

5 years ago

Level 10

How to show alert?

<script>
    $('.amount > input[type="number"]').on('input', updateTotal);

    function updateTotal(e){
        var amount = parseInt(e.target.value);
        alert('ss');

        if (!amount || amount < 0)
            return;

        var $parentRow = $(e.target).parent().parent();
        var cost = parseFloat($parentRow.find('.cost').text());
        var total = (cost * amount).toFixed(2);

        $parentRow.find('.total').text(total);
    }
</script>

shahr

5 years ago

Level 10

I changed this code but it did not worked.

<script>
    $('input[type="number"]').on('input', function (event) {
        event.preventDefault();
        var totalSum = 0;
        $('input[type="number"]').each(function () {
            var inputVal = $(this).val();
            if ($.isNumeric(inputVal)) {
                totalSum += parseFloat(inputVal);
            }
        });
        $('.total').val(totalSum);
    });
</script>

Please or to participate in this conversation.