How to solve Laravel Post Error 403 with ajax? - ajax

Question

I want to insert some record into database table which is using server side mode. Im using laravel 8, php version 8.0.13, database mysql.
This is my Route
use App\Http\Controllers\JabatanController;
Route::resource('jabatan', JabatanController::class, [
'names' => [
'index' => 'jabatan.list',
'store' => 'jabatan.store',
]]);
//dd($request->all());
My view
<button type="button" id="tambah-jabatan" class="btn btn-primary float-right" data-toggle="modal" data-target="#modal_tambah">
Tambah Jabatan
</button>
<!-- Modal -->
<div class="modal fade" id="modal_tambah" tabindex="-1" role="dialog" aria-labelledby="modalTambahLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTambahLabel">Tambah Data Jabatan</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- mb -->
<div class=" mb-3">
<label for="jabatan">Jabatan</label>
<input type="text" name="jabatan" class="form-control" id="jabatan" placeholder="Masukkan Jabatan disini" value="" required>
</div>
<!-- /mb -->
</div>
<div class="modal-footer">
<button type="button" id="close" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="save-jabatan" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
My Controllers
public function store(StoreJabatanRequest $request)
{
$data = Jabatan::updateOrCreate([
'jabatan' => $request->jabatan,
]);
return response()->json($data);
}
My Model
class Jabatan extends Model
{
use HasFactory;
protected $table = "jabatans";
protected $fillable = [
'jabatan'
];
}
some ajax script in my main view
<script>
$('#save-jabatan').on('click', function() {
$.ajax({
url: "{{route('jabatan.store')}}",
type: "post",
data: {
jabatan: $('#jabatan').val(),
"_token": "{{csrf_token()}}"
},
success: function(res) {
console.log(res.data);
alert(res.text)
$('#close').click()
$('#tb_jabatan').DataTable().ajax.reload()
},
error: function(xhr) {
alert(xhr.responseJSON.text)
}
})
})
</script>
and when im check on inspect i got this error
POST http://localhost:8000/jabatan 403 (Forbidden)
there's any suggestion?

Answer 1

Ok, so in my case the problem is on my App\Http\Request\StoreJabatanRequest.php
class StoreJabatanRequest extends FormRequest;
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* #return array
*/
public function rules()
{
return [
'jabatan' => 'required'
];
}