CODEWITHSUNDEEP
phpajaxlaravel
Guilherme Moreira
Guilherme Moreira

Reputation: 121

Laravel - POST form refreshing page for no reason

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);
        }
    })
})

Upvotes: 0

Views: 112

Answers (2)

Guilherme Moreira
Guilherme Moreira

Reputation: 121

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);
        }
    })
})

Upvotes: 1

AliUsama Dev
AliUsama Dev

Reputation: 150

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
}

Upvotes: 0

Related Questions