Here is my ajax code:
$('select[id=currency-data]').change(function () {
var currency_id = $(this).val();
$.ajax({
url: "{{Route('exchange-rate')}}",
type: 'POST',
data: {currency_id: currency_id },
success: function(data){
$('#ex-rate').val(data);
}
});
});
View:
{!! Form::label('currency_id', 'Currency:', ['class' => 'control-label']) !!}
{!! Form::Select('currency_id', $currency_data, Input::old('currency_id'), ['id'=>'currency-data','class' => 'form-control','required']) !!}
{!! Form::label('exchange_rate', 'Exchange Rate:', ['class' => 'control-label']) !!}
{!! Form::input('number','exchange_rate', Input::old('exchange_rate'), ['id'=>'ex-rate','class' => 'form-control','readonly','required']) !!}
when i run this,i get the error:TokenMismatchException in VerifyCsrfToken.php..
can someone give solution???
Changedata: {currency_id: currency_id },
to
data: data: {_token: '{!! csrf_token() !!}',currency_id: currency_id },
hi if you are keeping js and view file separate and want to use ajax to submit forms than use data attributes for any HTML tag in view to add csrf token like this.
<div id="toke" data-token="{!! csrf_token() !!}"></div>
now you can access token in js files
$.ajax({
url: "{{Route('exchange-rate')}}",
type: 'POST',
data: data: {_token: $('#token').data('token'),currency_id: currency_id },
success: function(data){
$('#ex-rate').val(data);
}
});
});
2nd Option is create hidden input element and use jquery form serialize to fetch form data
<form id="form-data" action="url" method = 'POST' />
{!! csrf_field() !!}
{!! Form::label('currency_id', 'Currency:', ['class' => 'control-label']) !!}
{!! Form::Select('currency_id', $currency_data, Input::old('currency_id'), ['id'=>'currency-data','class' => 'form-control','required']) !!}
{!! Form::label('exchange_rate', 'Exchange Rate:', ['class' => 'control-label']) !!}
{!! Form::input('number','exchange_rate', Input::old('exchange_rate'), ['id'=>'ex-rate','class' => 'form-control','readonly','required']) !!}
jquery
var form = $("#form-data");
$.ajax({
url: form.attr( 'action' ),
type: 'POST',
data: form.serialize(),
success: function(data){
$('#ex-rate').val(data);
}
});
});
Add this on your <head> tag on your blade file
<meta name="csrf-token" content="{{ csrf_token() }}">
On your javascript , right after your jQuery library, call :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
</script>