skip to Main Content

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


  1. Chosen as BEST ANSWER

    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. 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
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search