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)"  id="report-form">
    {{ csrf_field() }}

    <label for="description" >Description</label>
    <input id="description" type="text" name="description" value=""  placeholder="Write a report..."   required autofocus>

    <button type="submit" >
        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);
        }
    })
})

CodePudding user response：

It looks like the form is refreshing the page when you submit it because you are not preventing the default behavior of the form's submit event.

In your JavaScript code, you can use the event.preventDefault() method to prevent the default action of the form (which is to refresh the page).

Here is an example of how you can do that:

$('#report-form').on('submit', function(event) {
    event.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);
        }
    })
})

In the code above, I added the event parameter to the anonymous function that is called when the form is submitted. Then, I called event.preventDefault() to prevent the default behavior of the form's submit event.

CodePudding user response：

in your code, default GET method is called because you did not specify method.When you submit the form the request goes to your controller and do not trigger your onSubmit() function.

1. first change the button type 'submit' to 'button'.
2. In your reportEvent() function prevent the default behavior of form.

$('#report-form').on('submit', function(e) {
    e.preventDefault();
    // rest of code
    })

CodePudding user response：

Just add event.preventDefault(); just after the function start and also add return false at the end of function

function reportEvent(event_id, user_id, description) {

    event.preventDefault(); // Prevent the form from being submitted 
    $.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
        }
    });

    return false; // Prevent the form from being submitted
}