maaz
1 month ago

JQuery add data multiple times on prepend.

Posted 1 month ago by maaz

Hey everyone. I have some products on my database and I fetch it in a dropdown. when someone clicks on the product there are some text boxes where I fetch these things '' product-id, product-price, qty, total price, discount ''. When I click on the add button it prepends the product details in a table. after that when I select a new product and click on the add button it prepends the old product and the new one too, so how I can do this when I click on add button it should add the new product to the list, not the old one.

here is my code. blade

   <form action="">
                <div class="row justify-content-center">
                    <div class="col-md-5">
                        <div class="form-group">
                            <div class="form-group">
                                <label for="supplier">Select Supplier</label>
                                <select class="form-control select2bs4" id="supplier" style="width: 100%;">
                                    @foreach ($suppliers as $supplier)
                                    <option value="{{ $supplier->id}}"> {{$supplier->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- Date -->
                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="date">Date:</label>
                            <input type="date" class="form-control" id="date" name="date">
                        </div>
                    </div>

                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="ref">Reference No:</label>
                            <input type="text" class="form-control" id="ref" name="reference_no">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="balance">Remaining Balance:</label>
                            <input type="text" class="form-control" id="balance" value="{{$supplier->opening_balance}}"
                                name="remaining" disabled>
                        </div>
                    </div>
                </div>


                <div class="div mt-5 ml-4 pt-5" style="border-top:1px solid rgba(128, 128, 128, 0.267);">
                    <div class="row ">
                        <div class="col-md-4">
                            <div class="form-group">
                                <div class="form-group">
                                    <label for="add-product">Select Product</label>
                                    <select class="form-control select2bs4" style="width: 100%;" id="add-product">
                                        @foreach ($products as $product)
                                        <option value="{{ $product->id}}" data-id="{{$product->id}}"
                                            data-pro-name="{{$product->name}}"
                                            data-sale-price="{{$product->retail_price}}"
                                            data-pro-qty="{{$product->current_qty}}">
                                            {{$product->name}}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>


                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="qty">Quantity</label>
                                <input type="number" name="qty" class="form-control" id="qty">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="store-qty">Store Quantity</label>
                                <input type="text" name="store_qty" class="form-control" id="store-qty" disabled>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="purchase_price">Purchase Price</label>
                                <input type="text" name="purchase_price" class="form-control" id="purchase_price">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="discount">Discount %</label>
                                <input type="text" name="discount" class="form-control" id="discount">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="total_price">Total Price</label>
                                <input type="text" name="total_price" class="form-control" id="total_price" disabled>
                            </div>
                        </div>
                        <div class="row justify-content-end">
                            <div class="col-md-12">
                                <button class="btn btn-info" id="add">Add</button>
                            </div>
                        </div>
                    </div>
                </div>


                <table class="table table-bordered m-3">
                    <thead class="bg-dark">
                        <tr>
                            <td>Product</td>
                            <td>Qty</td>
                            <td>Store Qty</td>
                            <td>Purchase Price</td>
                            <td>Discount %</td>
                            <td>Total Price</td>
                            <td>Remove</td>
                        </tr>
                    </thead>

                    <tbody id="tbody">
                    </tbody>
                </table>
            </form>

js code.

  $(document).ready(function(){
    var trId = 1;
    $('body').on('change','#add-product',function(){
        var pro_id = $('#add-product').find(':selected').attr('data-id');
        var pro_name = $('#add-product').find(':selected').attr('data-pro-name');
        var pro_price = $('#add-product').find(':selected').attr('data-sale-price');
        var pro_qty = $('#add-product').find(':selected').attr('data-pro-qty');
        // alert(pro_qty);
        $('#qty').val(1);
        $('#store-qty').val(pro_qty);
        $('#purchase_price').val(pro_price);
        $('#total_price').val(pro_price);

 var row = '<tr id = ' + trId + '>\
                <td>\
                    ' + pro_name + '\
                    <input type="hidden" class="form-control form-control-sm" name="product_name[]" value=' + pro_id + ' readonly>\
                </td>\
                <td width="15%">\
                    <input type="number" class="form-control form-control-sm qty" name="qty[]" placeholder="Quantity" id="" value="1" min="1" >\
                </td>\
                <td width="15%">\
                    <input type="text" class="form-control form-control-sm store_qty" name="store_qty[]" value=' + pro_qty + ' readonly>\
                </td>\
                <td width="15%">\
                    <input type="text" class="form-control form-control-sm purchase_price" name="purchase_price[]" value=' + pro_price + '>\
                </td>\
                <td width="15%" class="number">\
                    <input type="text" class="form-control form-control-sm discount" name="discount[]" placeholder="Discount %">\
                </td>\
                <td class="number">\
                    <input type="text" class="form-control form-control-sm unit_cost"\
                        readonly name="unit_cost[]" value=' + pro_price + '>\
                </td>\
                <td class="actions">\
                    <a class="icon remove" href="">\
                        <i class="fa fa-trash"></i>\
                    </a>\
                </td>\
            </tr>';

            $('#add').click(function(event){
            event.preventDefault();
            $("#tbody").prepend(row);
            $("#qty").val("");
            $("#store-qty").val("");
            $("#purchase_price").val("");
            $("#discount").val("");
            $("#total_price").val("");

            });
trId++;


    });

Please sign in or create an account to participate in this conversation.