Laravel ajax 根据选择自动填充字段

Question

我正在努力解决一个 ajax 问题，我试图根据下拉框中的选择自动填充金额字段。

我的表格布局如下（表格名称为Otheritemsmapping）：

ID  |  Item   | Amount
 1  |  Item 1 | Amount 1
 2  |  Item 2 | Amount 2

我的 Blade 中的模态看起来像这样

<div class="modal fade" id="accountpayModal" tabindex="-1" role="dialog" aria-labelledby="accountpay" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="addaccountModal">Pay from Account of {{$member->first_name}} {{$member->last_name}}</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!!Form::open(array('action' => ['AccountController@item'], 'method'=>'POST', 'class'=>'form-horizontal'))!!}
            <div class="modal-body">
                <input type="hidden" name="member" value="{{$member->id}}">
                <label class="label-control">Item:</label>
                <div class="input-group">
                    <div class="form-group">
                        <select type="text" class="selectpicker" data-sytle="select-with-transition" name="item" value="C" id="selectBox">
                            @foreach ($otheritems as $o)
                                <option value ={{$o->item}}>{{$o->item}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <label class="label-control">Amount:</label>
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control" name="amount" id="textField">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-round btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-round btn-primary">Save Changes</button>
            </div>
            {!!Form::close()!!}
        </div>
    </div>
</div>

我在与上述模态相同的文件中有以下JS

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

       $.ajax({
           url: url,
           type: 'get',
           dataType: 'json',
           success: function(response) {
               if (reponse != null) {
                   $('textField').val(response.amount);
               }
           }
       });
   });
</script>

我在控制器上有以下 getPayments

public function getPayments($id = 0)
{
    $data = Otheritemmapping::where('item', $id)->first();
    return response()->json($data);
}

我已将以下内容添加到我的 Web.php 文件中

Route::get('get/payments/{id}', 'MemberController@getPayments')->name('getPayments');

但是，当从下拉列表中选择一个项目 ($o->item) 时，金额不会填充到“金额”字段中。

任何帮助都会很棒， 谢谢

Answer 1

在您的代码中有一些拼写错误。

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

       $.ajax({
           url: url,
           type: 'get',
           dataType: 'json',
           success: function(response) {
               if (response != null) {
                   $('#textField').val(response.amount);
               }
           }
       });
   });
</script>

希望这能解决您的问题。如果仍然有任何问题，请检查浏览器开发者控制台。让我知道错误，我会为你更新答案。

您应该使用 id 作为选项值，因为 id 是唯一的。