Undefined variable Laravel using ajax function - php

Question

I am using ajax for submitting data in the database but when I hit submit button in the return response "undefined " value I got, and the problem lies in the controller. I am not sure why I got this error. I am getting this error on fname variable and obv other variables too as they all are similar.
Here is the Controller
public function save(Request $request)
{
$validator = \Validator::make($request->all(), [
'cnic' => 'required|unique:patients',
]);
if ($validator->fails()) {
return response()->json(['success' => false, 'errors' => $validator->errors()->all()]);
}
$temppatientId = IdGenerator::generate(['table' => 'patients', 'length' => 5, 'prefix' => '22']);
$patientid = $temppatientId + 1;
$query = new patient;
$query->patientid = $patientid;
$query->fname =$fname;
$query->lname = $lname;
$query->cnic = $cnic;
$query->contactno = $contactno;
$query->gender = $gender;
$query->age = $age;
$query->dob = $dob;
$query->city = $city;
$query->address = $address;
$query->husbandname = $husbandname;
$query->fathername = $fathername;
$query->bloodgroup = $bloodgroup;
$query->maritalstatus = $maritalstatus;
$query->save();
return response()->json(['success' => true, 'patients' => $query]);
}
Here is the Ajax function
$(document).ready(function() {
$("#save1").on('click', function(e) {
var cnic = $("#cnic").val();
if (cnic == '') {
alert("Kindly Enter CNIC");
return false;
}
var gender = $("#gender").val();
if (gender == '') {
alert("Kindly Enter Gender");
return false;
}
var contactno = $("#contactno").val();
if (contactno == '') {
alert("Kindly Enter Contact No");
return false;
}
var fname = $("#fname").val();
if (fname == '') {
alert("Kindly Enter Name");
return false;
}
else{
$.ajax({
url: "/save",
type: "post",
data: $('#registrationform').serialize(),
dataType: 'json',
success: function(data) {
if (data.success === false) {
alert('CNIC already Exists !');
} else {
$("#patientid").val(data.patient.patientid);
// console.log(data.patient);
}
}
})
}
});
});
this is my blade file
<form class="form" data-parsley-validate id="registrationform" autocomplete="off">
#csrf
<div class="row">
<div class="col-md-4 col-4">
<div class="form-group mandatory">
<label for="first-name-column" class="form-label">First Name</label>
<input type="text" autofocus tabIndex="1" name="fname" id="fname" class="form-control" placeholder="First Name" name="fname" data-parsley-required="true">
</div>
</div>
<div class="col-md-4 col-4">
<div class="form-group">
<label for="last-name-column" class="form-label">Last Name</label>
<input type="text" id="lname" tabIndex="2" class="form-control" placeholder="Last Name" name="lname">
</div>
</div>
<div class="col-md-4 col-4">
<div class="form-group">
<label for="city-column" class="form-label">Age</label>
<input type="number" id="age" tabIndex="3" class="form-control" placeholder="Age" name="age" >
</div>
</div>
<div class="col-md-4 col-4">
<div class="form-group">
<label for="country-floating" class="form-label">DOB</label>
<input type="date" id="dob" tabIndex="4" class="form-control" name="dob" placeholder="Date of Birth">
</div>
</div>
<div class="col-md-4 col-4">
<div class="form-group choices" mandatory>
<label for="company-column" class="form-label choices">Gender:</label>
<div class="form-group">
<select class="choices form-select" tabIndex="5" id="gender" name="gender">
<option value="">SELECT</option>
<option value="MALE">MALE</option>
<option value="FEMALE">FEMALE</option>
<option value="NEUTER">NEUTER</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-4">
<div class="form-group mandatory">
<label for="email-id-column" class="form-label">Contact No</label>
<input type="number" id="contactno" tabIndex="6" class="form-control" name="contactno" placeholder="Contact No" data-parsley-required="true">
</div>
</div>
<div class="col-md-4 col-4">
<div class="form-group ">
<label for="email-id-column" class="form-label">Father Name</label>
<input type="text" id="fathername" tabIndex="7" class="form-control" name="fathername" placeholder="Father Name" data-parsley-required="true">
</div>
</div>
<div class="col-md-4 col-4">
<div class="form-group ">
<label for="email-id-column" class="form-label">Husband Name</label>
<input type="text" id="husbandname" tabIndex="8" class="form-control" name="husbandname" placeholder="Husband Name" data-parsley-required="true">
</div>
</div>
<div class="col-md-4 col-4">
<div class="form-group mandatory">
<label for="email-id-column" class="form-label">CNIC</label>
<input type="number" id="cnic" class="form-control" tabIndex="9" name="cnic" placeholder="CNIC" data-parsley-required="true">
</div>
</div>
<div class="col-md-4 col-4">
<div class="form-group ">
<label for="email-id-column" class="form-label">City</label>
<input type="text" id="city" tabIndex="10" class="form-control" name="city" placeholder="City" data-parsley-required="true">
</div>
</div>
<div class="col-md-4 col-4">
<div class="form-group choices">
<label for="company-column" class="form-label choices">Marital Status</label>
<div class="form-group">
<select class="choices form-select" tabIndex="11" id="maritalstatus" name="maritalstatus">
<option value="">SELECT</option>
<option value="NOT SPECIFIED">NOT SPECIFIED</option>
<option value="SINGLE">SINGLE</option>
<option value="MARRIED">MARRIED</option>
<option value="WIDOW">WIDOW</option>
<option value="WIDOWER">WIDOWER</option>
<option value="DIVORCED">DIVORCED</option>
<option value="SEPARATED">SEPARATED</option>
<option value="UNKNOWN">UNKNOWN</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-4">
<div class="form-group choices">
<label for="company-column" class="form-label choices">Blood Group</label>
<div class="form-group">
<select class="choices form-select" tabIndex="12" id="bloodgroup" name="bloodgroup">
<option value="">SELECT</option>
<option value="NOT SPECIFIED">NOT SPECIFIED</option>
<option value="A POSITIVE">A POSITIVE</option>
<option value="A NEGATIVE">A NEGATIVE</option>
<option value="B POSITIVE">B POSITIVE</option>
<option value="B NEGATIVE">B NEGATIVE</option>
<option value="O POSITIVE">O POSITIVE</option>
<option value="O NEGATIVE">O NEGATIVE</option>
<option value="AB POSITIVE">AB POSITIVE</option>
<option value="AB NEGATIVE">AB NEGATIVE</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-4">
<div class="form-group mandatory">
<label for="email-id-column" class="form-label">Address</label>
<input type="text" id="address" class="form-control" tabIndex="13" name="address" placeholder="Address" data-parsley-required="true">
</div>
</div>
<div class="col-6 col-lg-3 col-md-6">
<div class="card-body px-2 py-3-4">
<div class="row">
<div class="col-md-4 col-lg-4 col-xl-8 col-xxl-5 d-flex justify-content-start ">
<div class="stats-icon purple mb-2">
<i class="iconly-boldShow"></i>
</div>
</div>
<div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
<h6 class="text-muted font-semibold">Patient ID</h6>
<input class="font-extrabold mb-0" style="align-content: center; color:red; " type="number" name="patientid" id="patientid" disabled>
</div>
</div>
</div>
</div>
{{-- <label>Search Patient:</label>
<div class="col-lg-2">
<label>Patient ID:</label>
<input placeholder="Enter Patient ID" type="number" name="patientid"
id="selectpatientid" class="form-control form-control-sm d2">
</div>
<div class="col-lg-2">
<label>Patient CNIC:</label>
<input placeholder="Enter Patient CNIC" type="number" name="cnic"
id="selectpatientcnic" class="form-control form-control-sm d2">
</div>
</div> --}}
<div class="row">
<div class="col-12 d-flex justify-content-end">
<a id="save1" tabIndex="14" class="btn btn-primary me-1 mb-1">Register</a>
{{-- <button type="submit" class="btn btn-light-secondary me-1 mb-1">Register</button> --}}
<button type="reset" class="btn btn-light-secondary me-1 mb-1">Reset</button>
</div>
</div>
</form>

Answer 1

Try opening the F12 tools and heading over to the networking tab, under the networking tab you can double check the CSR under is getting pass along to the app under the 'headers' or 'request' once you've clicked on your jQuery request
You should also be able to see that larval responded with if you click 'response'
It might also be worth checking out the laravel.log under storage provider any more insight to the problem, this normally contains some help hints