Laravel ajax auto populate field based on selection

Question

I am working to solve an ajax issue I have where I am trying to auto populate an amount field based on the selection from the drop down box.

My table is layout as follows (Table name is Otheritemsmapping):

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

My modal in my Blade looks like this

<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>

I have the following JS in the same file as the above modal

<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>

I have the following on the Controller for getPayments

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

I have added the following to my Web.php file

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

However when selecting an item from the dropdown ($o->item), the amount is not being populated in the Amount field.

Any help would be great, Thanks

Answer 1

in your code there's some typos.

<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>

hope this will solve your problem. if still there's anything wrong then check the browser developer console. let me know the error and i will update the answer for you.

you should use id as the option value as id is unique.