Блог

Я работаю над решением проблемы ajax, с которой я сталкиваюсь, когда пытаюсь автоматически заполнить поле суммы на основе выбора из выпадающего списка.

Моя таблица выглядит следующим образом (имя таблицы — Otheritemsmapping):

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

Мой модальный в моем блейде выглядит так

 <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">amp;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>
  

У меня есть следующее на контроллере для получения платежей

 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-> элемент) сумма не заполняется в поле Сумма.

Любая помощь была бы отличной, спасибо

в вашем коде есть некоторые опечатки.

 <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 уникален.