I have a <form>
which calls an AJAX function with method POST and after doing some stuff it refreshes the page and I don’t really know why. If anyone can point out the problem, I’d greatly appreciate it!
web.php
Route::post('reportEvent', 'ReportController@create')->name('reportEvent');
ReportController.php
public static function create(Request $request)
{
$user_id = $request->input('user_id');
$event_id = $request->input('event_id');
$exists = DB::table('report')->where('users_id', $user_id)->where('event_id', $event_id)->get();
if (count($exists) > 0) {
return 2; # 'You have already reported this event!'
}
$report = new Report();
$highest = DB::table('report')->max('id');
$id = $highest + 1;
$report->id = $id;
$report->users_id = $user_id;
$report->event_id = $event_id;
$report->description = $request->input('description');
$report->save();
return 1; # 'Event reported!'
}
HTML
<form onsubmit="reportEvent({{ $event->id }}, {{ Auth::user()->id }}, description.value)" class="white-font" id="report-form">
{{ csrf_field() }}
<label for="description" class="white-font">Description</label>
<input id="description" type="text" name="description" value="" class="report-textarea" placeholder="Write a report..." required autofocus>
<button type="submit" class="report-btn mgl10">
Confirm
</button>
</form>
JS/AJAX
function reportEvent(event_id, user_id, description) {
$.ajax({
method: "POST",
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
url: "{{ route('reportEvent') }}",
data: { event_id: event_id, user_id: user_id, description: description },
success: function (response) {
showReportStatus(response); //just changes some HTML elements
}
});
}
EDIT 1 – After submitting the form, I get a url of something like:
http://localhost:8000/event/2?_token=o3YCw1OnddF5YjPjdeYXbrfA0EUuY2Qba8Fkaw7v&description=gdfsf
. Initially, the url is http://localhost:8000/event/2
EDIT 2 (Still not working) –
$('#report-form').on('submit', function(e) {
e.preventDefault();
var event_id = $('#event_id').val();
var user_id = $('#user_id').val();
var description = $('#description').val();
$.ajax({
url: "{{ route('reportEvent') }}",
type: "POST",
data: { event_id: event_id, user_id: user_id, description: description },
success: function (response) {
showReportStatus(response);
}
})
})
EDIT 3 – SOLUTION
Removed onsubmit
from form and added this function instead of the one I have before in JS:
let report_form = document.querySelector('#report-form');
report_form.addEventListener("submit", function(event) {
console.log("submitting");
event.preventDefault();
var event_id = $('#event_id').val();
var user_id = $('#user_id').val();
var description = $('#description').val();
var data = {
event_id: event_id,
user_id: user_id,
description: description
}
$.ajax({
url: '/reportEvent',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
type: 'POST',
data: data,
success: function(response) {
showReportStatus(response);
}
})
})
2
Answers
SOLUTION Removed onsubmit from form and added this function instead of the one I have before in JS:
Just add event.preventDefault(); just after the function start and also add return false at the end of function