Load text field using ajax in Laravel

Question

I am trying to load employee name in a employee text field after selecting employee id from another select field.

Route:

post('driver','SalaryController@driver');

Controller:

public function driver($eid)
{
    $driver = Employee::all()->where('eid',$eid)->pluck('name');
    return $driver;
}

Blade:

{!! Form::open(['action'=>'SalaryController@pay','method'=>'post','class'=>'form-horizontal']) !!}
<div class="col-md-12 d-section">
    <div class="col-md-6"> {{-- Left hand side --}}
        <div class="form-group"> {{-- Date --}}
            {!! Form::label('date','Date:',['class'=>'control-label col-sm-3']) !!}
            <div class="col-sm-9">
                {!! Form::text('date',null,['class'=>'form-control datetimepicker']) !!}
            </div>
        </div>
        <div class="form-group"> {{-- eid --}}
            {!! Form::label('eid','ID:',['class'=>'control-label col-sm-3']) !!}
            <div class="col-sm-9">
                {!! Form::select('eid',$repository->employees(),null,['class'=>'form-control','id'=>'eid']) !!}
            </div>
        </div>
    </div>
    <div class="col-md-6"> {{-- Right hand side --}}
        <div class="form-group"> {{-- Month --}}
            {!! Form::label('month','Month:',['class'=>'control-label col-sm-3']) !!}
            <div class="col-sm-9">
                {!! Form::select('month',$repository->months(),null,['class'=>'form-control']) !!}
            </div>
        </div>
        <div class="form-group"> {{-- name --}}
            {!! Form::label('name','Name:',['class'=>'control-label col-sm-3']) !!}
            <div class="col-sm-9">
                {!! Form::text('name',null,['class'=>'form-control','id'=>'name']) !!}
            </div>
        </div>
        <div class="form-group"> {{-- Paying --}}
            {!! Form::label('paid','Paying',['class'=>'control-label col-sm-3']) !!}
            <div class="col-sm-9">
                {!! Form::text('paid',null,['class'=>'form-control']) !!}
            </div>
        </div>
    </div>
</div>
<div class="col-md-12 d-section text-center">
    {!! Form::submit('PAY',['class'=>'btn btn-success','name'=>'advance']) !!}
    {!! Form::reset('RESET',['class'=>'btn btn-warning']) !!}
    <a href="{{ action('SalaryController@index') }}" role="button" class="btn btn-danger">CANCEL</a>
</div>
{!! Form::close() !!}

Ajax:

<script>
    $(document).ready(function(){
        $('#eid').change(function(){
            var eid = $(this).val();
            var csrf = $('#csrf').val();
            var name = $('#name').val();
            $.ajax({
                URL : 'driver',
                data : {driver:eid,_token:csrf},
                type : 'post'
            }).done(function(e){
                name.html(e)
            })
        })
    })
</script>

The code is not working. I tested with firebug. After select employee id it shows the following error

POST http://localhost/zamzam/advance 500 Internal Server Error 1.05s jquery.min.js (line 5)

EDIT

Here is the error log from storage\log\laravel.log

[2016-01-22 12:36:56] local.ERROR: exception 'Illuminate\Session\TokenMismatchException' in D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\VerifyCsrfToken.php:53
Stack trace:
#0 [internal function]: Illuminate\Foundation\Http\Middleware\VerifyCsrfToken->handle(Object(Illuminate\Http\Request), Object(Closure))
#1 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(124): call_user_func_array(Array, Array)
#2 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\View\Middleware\ShareErrorsFromSession.php(54): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#3 [internal function]: Illuminate\View\Middleware\ShareErrorsFromSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#4 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(124): call_user_func_array(Array, Array)
#5 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Session\Middleware\StartSession.php(62): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#6 [internal function]: Illuminate\Session\Middleware\StartSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#7 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(124): call_user_func_array(Array, Array)
#8 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse.php(37): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#9 [internal function]: Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse->handle(Object(Illuminate\Http\Request), Object(Closure))
#10 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(124): call_user_func_array(Array, Array)
#11 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Cookie\Middleware\EncryptCookies.php(59): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#12 [internal function]: Illuminate\Cookie\Middleware\EncryptCookies->handle(Object(Illuminate\Http\Request), Object(Closure))
#13 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(124): call_user_func_array(Array, Array)
#14 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode.php(42): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#15 [internal function]: Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode->handle(Object(Illuminate\Http\Request), Object(Closure))
#16 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(124): call_user_func_array(Array, Array)
#17 [internal function]: Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#18 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(103): call_user_func(Object(Closure), Object(Illuminate\Http\Request))
#19 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(122): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#20 D:\xampp\htdocs\zamzam\root\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(87): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter(Object(Illuminate\Http\Request))
#21 D:\xampp\htdocs\zamzam\index.php(54): Illuminate\Foundation\Http\Kernel->handle(Object(Illuminate\Http\Request))
#22 {main}

As long as the server returns an internal error, you should paste the error log. — Kdecherf, Jan 22 '16 at 08:52
@Kdecherf The error is showing in `firebug`. Where from I get the error log? — smartrahat, Jan 22 '16 at 09:05
Check the log of your webserver (or the log of Laravel which is, by default, stored in storage/logs) — Kdecherf, Jan 22 '16 at 09:11
@ZakariaAcharki I tried but nothing happened for `dd($eid)`. When I saw in `post` tab in `firebug` it shows the correct id which I have selected. — smartrahat, Jan 22 '16 at 12:53
TokenMismatchException shows that there is an issue with the CSRF token. Are you sure that the token is actually sent? — Kdecherf, Jan 22 '16 at 12:59
There is a similar issue here: http://stackoverflow.com/questions/31416965/send-form-for-create-with-ajax-and-laravel-5-1 — Kdecherf, Jan 22 '16 at 13:00

score 1 · Accepted Answer · answered Jan 22 '16 at 15:51

Finally I solved it. There were many mistakes in my code. Trying to list them and describe one by one. It might helps others in future.

Mistakes:

_token mismatch exception
Using wrong parameter in controller
Wrong ajax code

1. _token mismatch exception: As I am using Laravel Blade template in html form, I have _token field by default. But it has no id or class. So, I added a _token field by myself with id named token.

<input type="hidden" name="_token" value="{{ csrf_token() }}" id="token"/>

It's keep the original one too both of them have same values.

2. Using wrong parameter in controller: I was trying to use $eid as parameter. I should used Request facade and $request service container to inject instances of current http request to controller's method. I needed to inject the employee id (eid) in method, So I change my controller code to this

public function driver(Request $request)
{
    $eid = $request->get('eid'); //get the value of eid from "data : {eid:eid,_token:csrf},"
    $driver = Employee::all()->where('eid',$eid)->pluck('name');
    return $driver;
}

3. Wrong ajax code: I passed the middlware with token value, get the value of eid (employee id), now need to display the employee name in name field. After successfully connect to the database using ajax, It is just a simple jquery code to display a value in a text field. Here is my ajax code:

$(document).ready(function(){
    $('#eid').change(function(){
        var eid = $(this).val();
        var csrf = $('#token').val();
        $.ajax({
            url : 'driver',
            data : {eid:eid,_token:csrf},
            type : 'post'
        }).success(function(e){
            $('#name').val(e)
        })
    })
})

Route remains intact as it was

post('driver','SalaryController@driver');

Load text field using ajax in Laravel

1 Answers1