根据第一个选择框显示产品数量

Question

I have trouble displaying the amount of a product based on what i picked on the initial select box. I have only 1 table named products and it contains the columns id, name, amount.

product.blade.php

<td>
 <select name="product">
    <option selected="true" disabled="true">Products</option>
     @foreach($products as $id => $p)
        <option value="{!!$id!!}">{!!$p!!}</option>
     @endforeach
 </select>
</td>
<td>
    <input id="amount" type="text" name="amount" class="form-control 
    required" value=""/>
</td>

javascript

 $('#product').on('change', function () {
        var productid=$(this).val();
        var a=$(this).parent();
        var op="";
        $.ajax({
            type:'get',
            url:'{!!URL::route('getAmount')!!}',
            data:{'id':productid},
            dataType:'json',
            success:function(data){
                console.log(data.amount);
                a.find('#amount').val(data.amount);
            },
            error:function(){
            }
        });
    });

Controller

public function getProducts()
{
  $products = Product::lists('name', 'id', 'amount');
  return view('product', compact('products');
}

public function getAmount(Request $request){

  $product=Product::select('amount')->where('id',$request->id)->first();

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

Routes

Route::get('product', ['as' => 'product',
        'uses' => 'ProductController@getProducts']);
Route::get('/product/getAmount', ['as' => 'getAmount',
        'uses' => 'ProductController@getAmount']);

I just want to display the amount of the product on the input box next to it.

Answer 1

Doing an ajax request seems quite useless to me wouldn't it be easier to just add a data attribute to the option.

<td>
    <select id="products" name="product">
        <option selected="true" disabled="true">Products</option>
        @foreach($products as $id => $p)
            <option data-amount="{{ $p->amount }}" value="{{ $id }}">{{ $p }}</option>
        @endforeach
     </select>
</td>
<td>
    <input id="amount" type="text" name="amount" class="form-control required" value=""/>
</td>

And then add some javascript or jquery to fill the input when the select is changed.

$("#products").change(function() {
    $("#amount").val($("#products option:selected").data("amount"))
})

Also, watch out where you are using {!! !!} cause you might be introducing XSS which you definitely don't want.