Как предотвратить повторный ввод в корзину?если попытаться, то хотите qty ++.JQuery

Question

Я сделал покупку у поставщика, выбрал продукт и дал количество, затем добавил в корзину. но в следующий раз тот же товар добавлен в корзину в новом ряду. Я хочу предотвратить это и увеличить количество. Также есть проблема, я не мог сделать общий итог каждой строки.

Вот мой HTML-код показа корзины:

    <table class="table table-bordered table-sm">
            <thead>
                <tr class="text-center">
                    <th>ID</th>
                    <th>Name</th>
                    <th>UoM</th>
                    <th>Unite Price</th>
                    <th>Qty</th>
                    <th>L. Total</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
                <tr class="text-right">
                    <td colspan="5" style="font-weight: bold;">Grand Total</td>
                    <td class="total text-right pr-5"></td>
                </tr>
            </tfoot>
      </table>

Вот мой код jQuery:

$('#inputQty').keyup(function(event){
        var id = $('#pro_select').val();
        var qty = $(this).val();
        if (event.keyCode === 13 ) {
            $.ajax({
                url: "{{url('selectProduct')}}",
                method: 'POST',
                dataType: 'JSON',
                data: {id:id, _token: '{{csrf_token()}}'},
                success: function(data){
                    var lineTotal = data.buy_price * qty;
                        $('tbody').append('<tr><td class="text-center">'+ data.id +'</td><td>'+ data.name +'</td><td class="text-center">'+ data.uom +'</td><td class="text-right pr-5 price">'+ data.buy_price +'</td><td class="text-right pr-5 qty">'+ qty +'</td><td class="text-right pr-5 lineTotal">'+ lineTotal +'</td><td class="text-center"><button class="btn btn-sm btn-danger remove"><i class="fas fa-times"></i></button></td></tr>');

                }
            });
        }            
    });

Answer 1

Наконец-то я решил эту проблему.

Вот мой код:

<script>
  $(function(){
    $('#pro_select').change(function(){
        var id = $(this).val();
        $.ajax({
            url: "{{url('selectProduct')}}",
            method: 'POST',
            dataType: 'JSON',
            data: {id:id, _token: '{{csrf_token()}}'},
            success: function(data){
                var newRow = '<tr>'+
                                    '<td class="text-center">'+
                                        '<input type="hidden" class="id" value="'+ data.id +'"/>'+ data.id +'</td>'+
                                    '<td>'+ data.name +'</td>'+
                                    '<td class="text-center">'+ data.uom +'</td>'+
                                    '<td>'+
                                        '<input type="text" class="form-control form-control-sm price" value="'+ data.buy_price +'" readonly /></td>'+
                                    '<td>'+
                                        '<input type="number" id="inputQty" class="form-control form-control-sm qty"/></td>'+
                                    '<td>'+
                                        '<input type="text" class="form-control form-control-sm text-right lineTotal" readonly/></td>'+
                                    '<td class="text-center">'+
                                        '<button class="btn btn-sm btn-danger remove"><i class="fas fa-times"></i></button>'+
                                    '</td>'+
                            '</tr>';
                            if ($("tbody [value='"+data.id+"']").length < 1){
                                    $("tbody").prepend(newRow);
                            }
                            else {
                                alert("You have already added this Product. You Can not add this again. Please update this Product Quantity!");
                            }

                $('#inputQty').focus();

            }
        });           
    });

    $('table').delegate('.remove','click', function(){
        $(this).parent().parent().remove();
        total();
    });

    $('tbody').delegate('.price, .qty','keyup',function(){
        var tr = $(this).parent().parent();
        var price = tr.find('.price').val();
        var qty = tr.find('.qty').val();
        var lineTotal = (price * qty);
        tr.find('.lineTotal').val(lineTotal);
        total();
    });

    function total(){
        var total = 0;
        $('.lineTotal').each(function(){
            var amount = $(this).val() -0;
            total += amount;
        });
        $('.total').html(total +' /=');
    }
  });
</script>

Answer 2

Вы можете очистить поле ввода, используя $(this).val(''); в условии if (event.keyCode === 13 ) {...}.

Если вы хотите ограничить повторяющиеся записи, установите следующее значение на входе как $(this).val(++qty)