ajaxlaravelajaxform
Cannot get post Ajax data in Laravel Resource Controller
I want to submit a form without refresh the page.
Below is my jquery code for Ajax: ( the code was referring this website https://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59)
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#Calibrationform').submit(function(event) {
var dataString = $(this).serialize();
$.ajax({
url: "/Equipments",
data: dataString,
type: 'POST',
processData: false,
success: function(data) {
$('#response_message').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
// $('#message').append("<img id='checkmark' src='images/check.png' />");
});
},
error: function(data) {
$('#response_message').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Failed to Submit!</h2>")
.hide()
.fadeIn(1500, function() {
// $('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});
</script>
<div id="response_message"></div>
<form id="Calibrationform" class="static p-3 col-span-8 col-start-3" enctype="multipart/form-data">
@csrf
<input type="hidden" name="request_type" value="Update Calibration for All Category">
<div class="w-full rounded-lg shadow-lg p-4">
<div class="flex flex-wrap -mx-3 mb-6 col-start-3 col-span-8 row-start-2">
<div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
Location
</label>
<select id="Calibration_Filter_Location" name="Calibration_Location"
class="form-select appearance-none block mb-3 w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
<option style="display: none"></option>
@foreach ($locations as $location)
<option value="{{$location['Location']}}">{{
$location['Location'] }}</option>
@endforeach
</select>
<span style="color: red">@error('Calibration_Location'){{ $message
}}@enderror</span>
</div>
<div class="w-full md:w-1/4 px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
Equipment's Category
</label>
<select id="Calibration_Filter_Category" name="Calibration_Category"
class="form-select appearance-none block mb-3 w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
<option style="display: none"></option>
@foreach ($categories as $category)
<option value="{{$category['Category']}}">{{
$category['Category'] }}</option>
@endforeach
</select>
<span style="color: red">@error('Calibration_Category'){{ $message
}}@enderror</span>
</div>
<div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
Calibration Date
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
id="grid-first-name" type="date" name="Date_of_Calibration">
<span style="color: red">@error('Date_of_Calibration'){{ $message }}@enderror</span>
</div>
<div class="w-full md:w-1/4 px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
Next Due Date
</label>
<input
class="appearance-none block mb-3 w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-last-name" type="date" name="Next_Due_Date">
<span style="color: red">@error('Next_Due_Date'){{ $message }}@enderror</span>
</div>
</div>
<div class="w-full overflow-hidden rounded-lg shadow-xs">
<div class="w-full overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Equipment Name
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Registration Tag
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Cal Cert
</th>
<th scope="col" class="relative px-6 py-3">
</th>
</tr>
</thead>
<tbody id="Calibration_Table" class="bg-white divide-y divide-gray-200">
</tbody>
</table>
</div>
</div>
</div>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</div>
The issue is I checked my network the status is 200 but my resource controller store method is not running as I use dd(request()->all()) for checking but the function is not getting executed as well.
Hope could have some hints from you, thanks in advance
After adding return response()->json(["status"=>"success"]);
Solution
you can submit formdata in ajax
$('#Calibrationform').submit(function(event) {
var bodyFormData = new FormData(this);
$.ajax({
url: "/Equipments",
data: bodyFormData,
type: 'POST',
contentType: false,
processData: false,
success: function(data) {
$('#response_message').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
// $('#message').append("<img id='checkmark' src='images/check.png' />");
});
},
error: function(data) {
$('#response_message').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Failed to Submit!</h2>")
.hide()
.fadeIn(1500, function() {
// $('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});