【问题标题】:Laravel - How to specify rows for dynamic input fields based on conditionLaravel - 如何根据条件为动态输入字段指定行
【发布时间】:2020-01-10 16:57:42
【问题描述】:

我正在使用 Laravel-5.8 向发票添加动态输入字段。我已经写了这段代码:

控制器

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');
}

查看

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

javascipt

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

目前,当我点击“+”按钮三次时,图表中应该有一些链接:

现在,我想要实现的是这个>

  1. if(Auth::user()->is_hod == '0'),如图所示,动态输入字段的行数不应超过三 (3)。

  2. if(Auth::user()->is_hod == '1'), 或动态输入字段的行数可以多于三 (3)

  3. 如果下拉列表中的客户名称为 David,则 Qty 中的总数量不应超过 10 个

如何调整我的代码来实现这一点。

谢谢。

【问题讨论】:

    标签: jquery laravel


    【解决方案1】:

    要添加您想要的验证,您必须在两个不同的地方进行:

    • 第一个:

      $('.addRow').on('click', function () {
              var isHod = {!! Auth::user()->is_hod == '0' !!};
              var numRows = $('.qty').length
      
              if (isHod || (!isHod && numRows<3)) {
                  addRow();
              }
      });
      
    • 第二个:

      首先,您必须向您的选择和表单添加一个 id,如下所示:

      <select id="customer_select" name="customer_id" class="form-control">
      

      <form  id="customer_form" method="POST" action="{{route('invoice.store')}}">
      

      那么你应该在提交之前添加这个方法来验证你的表单:

      $('#customer_form').submit(function() {
          var qty = 0;
          $('.qty').each(function(){
              qty += parseFloat($(this).text());
          });
      
          var selectedCustomer = $('#customer_select option:selected').text();
      
          if (selectedCustomer == 'David' && qty>10) {
              alert("David should not have mor than 10 in quantity");
              return false;
          }
      });
      

    【讨论】:

      猜你喜欢
      • 2021-11-13
      • 1970-01-01
      • 2019-05-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-29
      相关资源
      最近更新 更多