noblemfd
1 month ago
188
1
Laravel

specify dynamic input fields based on condition

Posted 1 month ago by noblemfd

I am using Laravel-5.8 to add dynamic input fields to an invoice. Already, I have written this code:

Controller

public function create()
{
    $customers = Customer::all();
    $products = Product::all();
    return view('invoice.create', compact('customers','products'));
}

public function store(Request $request)
{
    $request->validate([
        'customer_id' => 'required',
        'product_id' => 'required',
        'qty' => 'required',
        'price' => 'required',
        'dis' => 'required',
        'amount' => 'required',
    ]);
    $invoice = new Invoice();
    $invoice->customer_id = $request->customer_id;
    $invoice->total = 1000;
    $invoice->save();
    foreach ( $request->product_id as $key => $product_id){
        $sale = new Sale();
        $sale->qty = $request->qty[$key];
        $sale->price = $request->price[$key];
        $sale->dis = $request->dis[$key];
        $sale->amount = $request->amount[$key];
        $sale->product_id = $request->product_id[$key];
        $sale->invoice_id = $invoice->id;
        $sale->save();
     }
     return redirect('invoice/'.$invoice->id)->with('message','invoice created Successfully');
}

invoice.blade

    <form  method="POST" action="{{route('invoice.store')}}">
    @csrf
       <div class="form-group col-md-3">
         <label class="control-label">Customer Name</label>
         <select name="customer_id" class="form-control">
         <option>Select Customer</option>
         @foreach($customers as $customer)
              <option name="customer_id" value="{{$customer->id}}">{{$customer->name}} </option>
         @endforeach
         </select>                            
      </div>
      <div class="form-group col-md-3">
         <label class="control-label">Date</label>
         <input name="date"  class="form-control datepicker"  value="<?php echo date('Y-m-d')?>" type="date" placeholder="Enter your email">
      </div>

      <table class="table table-bordered">
        <thead>
           <tr>
               <th scope="col">Product Name</th>
               <th scope="col">Qty</th>
               <th scope="col">Price</th>
               <th scope="col">Discount</th>
               <th scope="col">Amount</th>
               <th scope="col"><a class="addRow"><i class="fa fa-plus"></i></a></th>
             </tr>
           </thead>
           <tbody>
               <tr>
                 <td><select name="product_id[]" class="form-control productname" >
                    <option>Select Product</option>
                  @foreach($products as $product)
                       <option name="product_id[]" value="{{$product->id}}">{{$product->name}}</option>
                  @endforeach
                         </select></td>
                <td><input type="text" name="qty[]" class="form-control qty" ></td>
                <td><input type="text" name="price[]" class="form-control price" ></td>
                <td><input type="text" name="dis[]" class="form-control dis" ></td>
               <td><input type="text" name="amount[]" class="form-control amount" ></td>
               <td><a   class="btn btn-danger remove"> <i class="fa fa-remove"></i></a></td>
             </tr>
           </tbody>
           <tfoot>
            <tr>
             <td></td>
             <td></td>
             <td></td>
             <td><b>Total</b></td>
             <td><b class="total"></b></td>
             <td></td>
            </tr>
           </tfoot>

        </table>
        <div >
           <button class="btn btn-primary" type="submit">Submit</button>
        </div>
    </form>

javascript

<script type="text/javascript">
    $(document).ready(function(){
        $('tbody').delegate('.productname', 'change', function () {
            var  tr = $(this).parent().parent();
            tr.find('.qty').focus();
        })
        $('tbody').delegate('.productname', 'change', function () {
            var tr =$(this).parent().parent();
            var id = tr.find('.productname').val();
            var dataId = {'id':id};
            $.ajax({
                type    : 'GET',
                url     :'{!! URL::route('findPrice') !!}',
                dataType: 'json',
                data: {"_token": $('meta[name="csrf-token"]').attr('content'), 'id':id},
                success:function (data) {
                    tr.find('.price').val(data.sales_price);
                }
            });
        });
        $('tbody').delegate('.qty,.price,.dis', 'keyup', function () {
            var tr = $(this).parent().parent();
            var qty = tr.find('.qty').val();
            var price = tr.find('.price').val();
            var dis = tr.find('.dis').val();
            var amount = (qty * price)-(qty * price * dis)/100;
            tr.find('.amount').val(amount);
            total();
        });
        function total(){
            var total = 0;
            $('.amount').each(function (i,e) {
                var amount =$(this).val()-0;
                total += amount;
            })
            $('.total').html(total);
        }
        $('.addRow').on('click', function () {
            addRow();
        });
        function addRow() {
            var addRow = '<tr>\n' +
                '         <td><select name="product_id[]" class="form-control productname " >\n' +
                '         <option value="0" selected="true" disabled="true">Select Product</option>\n' +
'                                        @foreach($products as $product)\n' +
'                                            <option value="{{$product->id}}">{{$product->name}}</option>\n' +
'                                        @endforeach\n' +
                '               </select></td>\n' +
'                                <td><input type="text" name="qty[]" class="form-control qty" ></td>\n' +
'                                <td><input type="text" name="price[]" class="form-control price" ></td>\n' +
'                                <td><input type="text" name="dis[]" class="form-control dis" ></td>\n' +
'                                <td><input type="text" name="amount[]" class="form-control amount" ></td>\n' +
'                                <td><a   class="btn btn-danger remove"> <i class="fa fa-remove"></i></a></td>\n' +
'                             </tr>';
            $('tbody').append(addRow);
        };
        $('.remove').live('click', function () {
            var l =$('tbody tr').length;
            if(l==1){
                alert('you cant delete last one')
            }else{
                $(this).parent().parent().remove();
            }
        });
    });
</script>

At the moment, when I click the '+' button three times I should have something link this in the diagram:

https://i.stack.imgur.com/LFlTD.png

Now, what I want to achieve is this>

  1. if(Auth::user()->is_hod == '0'), the number of rows for the dynamic input fields should not be more than three (3) as shown in the diagram.

  2. if(Auth::user()->is_hod == '1'), The number of rows for or the dynamic input fields can be more than three (3)

  3. If customer name from the the dropdownlist is David, the total quantity from Qty should not be more than 10

How do I adjust my code to achieve this.

Thank you.

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