How to successfully Insert into database using ajax in laravel? - php

Question

Please have been trying to insert data into my database using ajax request in laravel. Am getting errors and i cant really find solution to it.Below is what I have done so far.
Header
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="_token" content="{{csrf_token()}}"/>
Blade file
<div class="content">
<form class="btn-submit" id="ajax" action="{{URL::to('insert-academic')}}">
<div class="form-group">
<label>Academic Year</label>
<input type="text" name="academic_year" class="form-control" placeholder="title" required="">
</div>
<div class="form-group">
<label>Description</label>
<input type="text" name="academic_description" class="form-control" placeholder="details" required="">
</div>
<div class="form-group">
<label>Semester</label>
<input type="text" name="academic_semester" class="form-control" placeholder="details" required="">
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
<script type="text/javascript">
$("#ajax").click(function(event) {
event.preventDefault();
$.ajax({
type: "post",
url: "{{ url('postinsert') }}",
dataType: "json",
data: $('#ajax').serialize(),
success: function(data){
alert("Data Save: " + data);
},
error: function(data){
alert("Error")
}
});
});
</script>
Route
Route::post('insert-academic', 'AcademicYearController#addAcademic');
Controller File
public function addAcademic(Request $request)
{
$aca_year = new AcademicYear;
$aca_year -> academic_year = $request->input('academic_year');
$aca_year -> academic_description = $request->input('academic_description');
$aca_year -> academic_semester = $request->input('academic_semester');
$aca_year->save();
if ($aca_year) {
return response()->json([
'status' => 'success']);
} else {
return response()->json([
'status' => 'error']);
}
}
Am getting Error..Please how do I successfully add the data to the database

Answer 1

Blade file - remove form action attribute as it is of no use.
<div class="content">
<form class="btn-submit" id="ajax">
<div class="form-group">
<label>Academic Year</label>
<input type="text" name="academic_year" class="form-control" placeholder="title" required="">
</div>
<div class="form-group">
<label>Description</label>
<input type="text" name="academic_description" class="form-control" placeholder="details" required="">
</div>
<div class="form-group">
<label>Semester</label>
<input type="text" name="academic_semester" class="form-control" placeholder="details" required="">
</div>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
<script type="text/javascript">
$("#ajax").on('submit', function(event) {
event.preventDefault();
$.ajax({
type: "post",
url: "{{route('postinsert')}}",
dataType: "json",
data: $('#ajax').serialize(),
success: function(data){
alert("Data Save: " + data);
},
error: function(data){
alert(data);
}
});
});
</script>
Route: add name for the route
Route::post('insert-academic', 'AcademicYearController#addAcademic')->name('postinsert);
Controller method:
public function addAcademic(Request $request){
$aca_year = new AcademicYear;
$aca_year->academic_year = $request->academic_year;
$aca_year->academic_description = $request->academic_description;
$aca_year->academic_semester = $request->academic_semester;
if ($aca_year->save()) {
return response()->json(['status'=> 'success']);
} else {
return response()->json(['status'=> 'error']);
}
}

Answer 2

Use submit not click. If you bind click, it will trigger when you click anywhere in form. You need to bind submit event.
$("#ajax").on('submit', function(event) {
event.preventDefault();
$.ajax({
type: "post",
url: "{{ url('postinsert') }}",
dataType: "json",
data: $('#ajax').serialize(),
success: function(data){
alert("Data Save: " + data);
},
error: function(data){
alert("Error")
}
});
});