Блог

Главная - Вопросы по программированию - Как я могу предотвратить дублирование записи в корзине? если попробовать, то нужно кол-во . jQuery ( jQuery )

Как я могу предотвратить дублирование записи в корзине? если попробовать, то нужно кол-во . jQuery ( jQuery )

#javascript #jquery #cart

#javascript #jquery #Корзина

Вопрос:

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

Это мой выходной скриншот

Вот мой 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>');

                }
            });
        }            
    });

Ответ №1:

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

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

Комментарии:

1. $(this).val(«); это работа. Но другое не выполнено. без проверки идентификатора корзины, как реализовать логику $(this).val( кол-во)? Мне непонятно. Как сделать общую сумму?

Ответ №2:

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

Вот мой код:

 <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>
Метки: ,