RE-Laravel:从下拉列表中选择值后自动填充输入

时间:2019-09-23 04:02:00

标签: ajax laravel dropdown

在用户从下拉列表中选择之后,我无法将数据检索到输入框中。有什么建议吗?最后一个建议不起作用。

internalaudit.blade.php

        <div class="form-group">
            {!! Form::label('text', 'Doc No', ['class' => 'col-lg-3 control-label']) !!}
            <div class="col-lg-10">
                <select name="docNo" id="docNo" class="form-control" style="width:250px">

                    @foreach ($soplists as $soplist)
                    <option value="{{ $soplist->id }}">{{ $soplist->doc_no }}</option>
                    @endforeach
                </select>
            </div>
        </div>




        <input type="text" class="form-control" name="rev_no" id="rev_no">

          <input type="text" class="form-control" name="title" id="title">

Ajax

 <script>
     $('#docNo').change(function() {
         var id = $(this).val();
         var url = '{{ route("getDetails", ":id") }}';
         url = url.replace(':id', id);

         $.ajax({
             url: url,
             type: 'get',
             dataType: 'json',
             success: function(response) {
                 if (response != null) {
                     $('#rev').val(response.rev_no);
                     $('#title').val(response.title);
                 }
             }
         });
     });

控制器

 public function internalAudit()
    {

        /*Generate number*/
        $query = Cars::latest()->first(); //get last query
        $validators = User::all();
        $departments =  Department::all();
        $isolists =  isoList::all();
        $soplists =  sopList::all();

        $ex = explode('/', $query['iaCarRefNo']); //explode last number from DB

        $type = strtoupper(Request::segment(2)); //get type from url

        if (empty($query->iaCarRefNo)) {
            $number = '1';
            $nextNumber = 'PLW' . '/' . date('y') . $type . '/' . sprintf("%03d", $number);
        } else {
            $number = $ex[2] + 1;
            $nextNumber = 'PLW' . '/' . date('y') . $type . '/' . sprintf("%03d", $number);
        }


        return view('cars.internalaudit', compact('nextNumber', 'validators', 'departments', 'isolists', 'soplists'));
    }


    public function getDetails($id = 0)
    {
        $data = sopList::where('doc_no', $id)->first();
        return response()->json($data);
    }

路线

Route::get('get/details/{id}', 'internalAuditController@getDetails')->name('getDetails');

Route::get('/internalaudit', 'internalAuditController@internalAudit');

Route::post('/internalaudit', ['as' => 'internalaudit.store', 'uses' => 'internalAuditController@store']);

数据库sop_list表图像链接

https://ibb.co/SwkJhLc

下拉并输入图像

https://ibb.co/0VN3Z2y

“网络”标签

https://ibb.co/56w5BLD

2 个答案:

答案 0 :(得分:0)

您给响应提供了错误的ID,也应为标题输入提供ID。

<input type="text" class="form-control" name="title" id="title">
<script>
 $(document).ready(function(){
  $(document).on('change','#docNo',function(){
    var id = $(this).val();
    var url = '{{ route("getDetails", ":id") }}';
    url = url.replace(':id', id);
    $.ajax({
             type: 'get',
             url: url,
             dataType: 'json',
             success: function(response) {
              $('#rev_no').val(response.rev_no);
              $('#title').val(response.title);

             }
         });
    });
 });
</script>

答案 1 :(得分:0)

enter image description here 根据您的console.log的编码,有2个错误$.ajax is not function$.(...) datetimepicker is not function,因为这些错误,现在您的ajax无法正常工作,因此您需要首先解决这些问题。解决这些问题后,您将能够发送ajax请求并更新输入文件。

要解决第一个问题,请下载jQuery的常规版本(压缩或不压缩)并将其包含在您的项目中。

要解决第二个问题,请下载相关的datetimepicker,并将其包含在项目中,例如jQuery。

在将#rev选择器更新为#rev_no

之后
$('#rev_no').val(response.rev_no);

也可以使用laravel helper function代替echo json_encode();

return response()->json($data);

在您的表中没有doc_no = 3的记录,在刀片中,您正在使用$soplist->id

<option value="{{ $soplist->id }}">{{ $soplist->doc_no }}</option>

在控制器上做同样的事情,

$data = sopList::where('id', $id)->first();

 $data = sopList::find($id);