如何在购物车中防止重复输入？如果尝试，那么想要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

您可以通过在if (event.keyCode === 13 ) {...}条件中使用$(this).val('');来清除输入字段。

如果要限制重复条目，请将input中的下一个值设置为$(this).val(++qty)

Answer 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>