Laravel ajax, the page keeps on refreshing. I want to stop it from refreshing after posting data - ajax

Question

I am using laravel and ajax to update records from table. Currently, the records are successfully being updated but somehow a refresh is triggered, making the ajax feature useless. i need a way to just post the form to update my database record without refreshing the page.
The following is my code.
View File Ajax
$(document).on("click", "#primaryButton", function(e) {
e.preventDefault(); // Prevent Default form Submission
$.ajax({
type: "post",
url: "{{ route('event-qr-post') }}",
data: $("#message").serialize(),
success: function(store) {
location.href = store;
console.log("success!");
console.log(location.href);
console.log($("#message").serialize());
},
error: function() {
console.log("fail");
}
}).done(function(store) {
console.log("itsdone");
});
// e.preventDefault();
return false;
});
View File Submit Form
<form enctype="multipart/form-data" id="message">
#csrf
<div class="form-l">
<div id="ref-lookup">
<label style="font-size: 22px; font-weight: 700;margin-block:10px;" for="eventTitle">Reference
number</label>
<input id="id" name="id" value="{{ '' }}" required>
{{-- <input type="hidden" name="name" value="{{ $eid->name }}" required> --}}
<input type="hidden" name="staffName" value="{{ $sid->name }}" required>
<input type="hidden" name="submitType" id="submitType" value="">
<input type="hidden" name="pageType" id="pageType" value="{{ $type }}">
{{-- <input type="hidden" name="guestLeft" id="guestLeft" value=""> --}}
<div style="display:flex;justify-content:space-between;gap:10px">
<button type="button" style="background-color:green"
onclick="findGuest(document.getElementById('id').value);">Find Contact</button>
<button id="addGuest" type="button" style="background-color:red" onclick="addGuests();">Add a
Replacement</button>
</div>
</div>
<div id="guestForm">
<div class="form-group">
<label for="" style="width:120px; margin-top:10px; ">First Name</label>
<input id="guestFirstName" name="first_name" value="">
</div>
<div class="form-group">
<label for="" style="width:120px; margin-top:10px; ">Last Name</label>
<input id="guestSurname" name="last_name" value="">
</div>
<div class="form-group">
<label for="" style="width:120px; margin-top:10px; ">Email</label>
<input id="guestEmail" name="email" value="">
</div>
<div class="form-group">
<label for="" style="width:120px; margin-top:10px; ">Company</label>
<input id="companyName" name="company" value="">
</div>
<div class="form-group">
<label for="" style="width:120px; margin-top:10px; ">Job Title</label>
<input id="guestTitle" name="title" value="">
</div>
<div class="form-group">
<label for="" style="width:120px; margin-top:10px; ">Tel</label>
<input id="guestPhone" name="tel" value="">
</div>
<div class="form-group">
<label for="" style="width:120px; margin-top:10px; ">Country</label>
<input id="guestCountry" name="country" value="">
</div>
<div class="form-group">
<label for="" style="width:120px; margin-top:10px; ">Notes</label>
<input id="guestNotes" name="notes" value="">
</div>
<button type="button" class="btn-blue" id="primaryButton">
Submit
<span class="foo fa fa-star checked"></span>
</button>
</div>
</div>
Controller
public function post_eventQR_attendance(Request $request)
{
// $ins = $request->all();
// unset($ins['_token']);
// dd($ins);
$User = MasterTempAward::where('id', $request->get('id'))->first();
$User->modified_by = $request->get('staffName');
$User->attended = "Yes";
$User->time = Carbon::now();
$User->business_card = "";
$User->save();
}

Answer 1

Your page is being refreshed because of the location.href = store; that you passed after the ajax request receives a success response.
location.href redirects the webpage to the specified URL.
So change your Ajax code to this:
$(document).on("click", "#primaryButton", function(e) {
e.preventDefault(); // Prevent Default form Submission
$.ajax({
type: "post",
url: "{{ route('event-qr-post') }}",
data: $("#message").serialize(),
success: function(store) {
// location.href = store;
console.log("success!");
// console.log(location.href);
console.log($("#message").serialize());
},
error: function() {
console.log("fail");
}
}).done(function(store) {
console.log("itsdone");
});
// e.preventDefault();
return false;
});