Question

第一行已成功填充文本框，但是当我添加一行时，在其余行上，当我更改下拉列表时，文本框仍为空且未填充

This is my layout, I am using jquery.form repeater

HTML元素/表单重复器

此表仅用作标题
<h4 class="form-section"><i class="ft-mail"></i> Charges/Rates</h4> <table class="table mb-0"> <thead class="bg-teal bg-lighten-4"> <tr> <th>Currency</th> <th>Charges</th> <th>Amount</th> <th>Unit</th> <th style="padding-right: 80px;">Total</th> <th></th> </tr> </thead> </table>

这是表单转发器

   `<div class="repeater-default" style="padding-top: 25px;">
       <div data-repeater-list="car">
           <div data-repeater-item>
              <div class="row">
                 <div class="form-group mb-1 col-sm-12 col-md-2">
                       {!! Form::select('charge', $charges, null, 
                       ['class'=>'form-control charge', 'id'=>'charge']) !!}
                 </div>
                 <div class="form-group mb-1 col-sm-12 col-md-2">
                        <input type="text" class="form-control amount" 
                         id="amount">
                 </div>
                 <div class="form-group mb-1 col-sm-12 col-md-2">
                        <textarea class="form-control" id="bio" rows="1"> 
                        </textarea>
                  </div>
                  <div class="skin skin-flat form-group mb-1 col-sm-12 col- 
                   md-2">
                       <input class="form-control" type="tel" value="1- 
                       (555)-555-5555" id="tel-input">
                  </div>
                  <div class="form-group mb-1 col-sm-12 col-md-2">
                      <select class="form-control" id="profession">
                          <option>Select Option</option>
                          <option>Option 1</option>
                          <option>Option 2</option>
                          <option>Option 3</option>
                          <option>Option 4</option>
                          <option>Option 5</option>
                      </select>
                   </div>
                   <div class="form-group mb-1 col-sm-12 col-md-2">
                         <button type="button" class="btn btn-danger" data- 
                         repeater-delete> <i class="ft-x">Delete</i> 
                         </button>
                   </div>
               </div>
          </div>
     </div>
     </div>
</div>`

我的控制器

  `public function findcharge($id){
    $amount = Charge::where('id', $id)->pluck('amount');
    return response()->json(['success'=>true, 'info'=>$amount]);
 }`

获取金额的Java

<script>
    $("#charge").change(function() {
        $.ajax({
            url: '/charges/' + $(this).val(),
            type: 'get',
            data: {},
            success: function(data) {

                if (data.success == true) {
                    $("#amount").val(data.info);

                } else {
                    alert('Cannot find info');
                }

            },
            error: function(jqXHR, textStatus, errorThrown) {}
        });
    });
</script>

Answer 1

在页面加载时触发代码

<script>
   $(function(){
    $("body").on('change',"#charge",function() {
        $.ajax({
            url: '/charges/' + $(this).val(),
            type: 'get',
            data: {},
            success: function(data) {

                if (data.success == true) {
                    $(this).closest('[data-repeater-item]').find("#amount").val(data.info);

                } else {
                    alert('Cannot find info');
                }

            },
            error: function(jqXHR, textStatus, errorThrown) {}
        });
    });
})
</script>

Laravel多行输入/选择下拉菜单时自动在一行中填写文本框字段

1 个答案: