Question

我有一个表单，我已经使用选项卡将其分成了几个部分，在第二个选项卡中，我使用了一个select选项，然后尝试使用Ajax自动填充2个文本框和一个文本区域，但是虽然控制台日志显示ajax返回了该对象，但未填写必填字段。

标签

<div class="tab-pane fade " id="package_details">

选择选项


<select name="package"  id="packageid" >             
 <option  selected >  Select a Package  </option>        
  @foreach($package as $c)
 <option value="{{$c->id}}">{{$c->tour_name}}</option>
   @endforeach
  </select>

我需要自动填充的文本字段

<input type="number" name="no_of_days" id="no_of_days" class="form-control"
                                    placeholder="Days" >
<input type="number" name="cost" id="cost" class="form-control"
                                     placeholder="Price" >
<textarea rows="4" cols="50"  class="form-control" id="description" name="description" placeholder=" Package Details"  ></textarea>

我的Ajax代码

$(document).on('change', '#packageid', function(e) { 
       e.preventDefault(); 
       var pkid = $(this).val();
     $.ajax({
         type:'POST',
          url: "{{ route('package.tour') }}",
          dataType: "json",
         data:{
       '_token':$('input[name=_token]').val(),        
       'selectedid': pkid
        },
        success: function(data){
           // console.log(data);
          $('#description').val(data.description);
          $('#no_of_days').val(data.no_of_days);
          $('#cost').val(data.cost);

           }

      });
    });

控制器中的功能

public function getPackage(Request $request)
    {
        $data = packages::where('id', $request->selectedid)->get();

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

我的Ajax / JQuery代码有什么问题？

Answer 1

在ajax响应中使用以下命令进行检查：

   $("textarea#description").val(data.description);

   $("input#no_of_days").val(data.no_of_days);

   $("input#cost").val(data.cost);

Answer 2

我终于弄清楚了，因为响应是一个数组，我不得不使用$（“＃description”）。val（data [0] .description）;而且有效！

使用Ajax和jQuery自动填充多个文本字段

2 个答案: