How to run laravel route controller function with jquery ajax in form

Question

I'm currently creating a small project and I want to prevent form from submit. That works well but I can't give exact url to laravel route with ajax. How can do that? Here is my code

<form id="sendlike" class="d-inline ms-5">
                            <input type="hidden" name="like" id="likeInput">
                            <input type="hidden" value="{{$amv->id}}" id="amvid">
                            <button class="btn btn-outline-primary" id="like">Like {{$amv->like}}</button>
                        </form>

Jquery

var like = document.getElementById("like");
var dislike = document.getElementById("dislike");
like.addEventListener("click", function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    var likecount = like.textContent;
    var amvid = document.getElementById("amvid").value;
    var addlike = parseInt(likecount.slice(5)) + 1;
    document.getElementById("likeInput").value = addlike;
    console.log("localhost:8000/amvtube/like/" + amvid)
    // $("#sendlike").submit();
});
$("#sendlike").on("submit", function (e) {
    e.preventDefault();
    var likecount = like.textContent;
    var amvid = document.getElementById("amvid").value;
    var addlike = parseInt(likecount.slice(5)) + 1;
    var likeData = addlike;
        $.ajax({
            type: "POST",
            url: `{{ url('../../../../amvtube/like/'${amvid}') }}`,
            data: likeData,
            success: function () {
                like.textContent = "Like" + addlike;
            }
        });
    return false;
});

My route

Route::post('amvtube/like/{id}', [AmvController::class, 'like']);

Route function

public function like($id) {
    $validator = validator(request()->all(), [
        'like' => 'required',
    ]);
    if($validator->fails()) {
        return back()->withErrors($validator);
    }
    $amv = Amv::find($id);
    $amv->like = request()->like;
    $amv->update();
}

Please i need this TwT

Innovin · Accepted Answer · 2022-10-07 11:57:20Z

1

First off all, give your route a name by adding this to your route:

Route::post('amvtube/like/{id}', [AmvController::class, 'like'])->name('amvtube.like');

Now in your jQuery, first create a variable called url. Then assign the url to it before passing it to your ajax. Here is the adjusted jQuery code.

var like = document.getElementById("like");
var dislike = document.getElementById("dislike");
like.addEventListener("click", function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    var likecount = like.textContent;
    var amvid = document.getElementById("amvid").value;
    var addlike = parseInt(likecount.slice(5)) + 1;
    document.getElementById("likeInput").value = addlike;
    console.log("localhost:8000/amvtube/like/" + amvid)
    // $("#sendlike").submit();
});
$("#sendlike").on("submit", function (e) {
    e.preventDefault();
    var likecount = like.textContent;
    var amvid = document.getElementById("amvid").value;
    var addlike = parseInt(likecount.slice(5)) + 1;
    var likeData = addlike;
    var url = "{{ route('amvtube.like', ':id') }}";
    url = url.replace(':id', amvid);
        $.ajax({
            type: "POST",
            url: url,
            data: likeData,
            success: function () {
                like.textContent = "Like" + addlike;
            }
        });
    return false;
});

Now this way, it should work.

answered Oct 7, 2022 at 11:57

Innovin

8301 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Thant Htet Aung Over a year ago

It shows this error in console POST localhost:8000/amvtube/watch/… 404 (Not Found)

Innovin Over a year ago

I need to see what you tried. You probably made some error

Thant Htet Aung Over a year ago

I just copied and pasted in my code and it said "jquery-3.6.1.js:10135 POST localhost:8000/amvtube/watch/… 404 (Not Found)"

Innovin Over a year ago

I need to see your code. click here to join my stackoverflow chat room.

Abdullah Afridi · Accepted Answer · 2022-10-07 14:06:11Z

Please add "/" to route in route.php:

Route::post('/amvtube/like/{id}', [AmvController::class, 'like'])->name('amvtube.like');

In JS:

var like = document.getElementById("like");
    var dislike = document.getElementById("dislike");
    like.addEventListener("click", function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var likecount = like.textContent;
        var amvid = document.getElementById("amvid").value;
        var addlike = parseInt(likecount.slice(5)) + 1;
        document.getElementById("likeInput").value = addlike;
        console.log("localhost:8000/amvtube/like/" + amvid)
        // $("#sendlike").submit();
    });
    $("#sendlike").on("submit", function (e) {
        e.preventDefault();
        var likecount = like.textContent;
        var amvid = document.getElementById("amvid").value;
        var addlike = parseInt(likecount.slice(5)) + 1;
        var likeData = addlike;
        var url = '{{ route("amvtube.like.",":id") }}';
            url = url.replace(':id',amvid);
            $.ajax({
                type: "POST",
                url: url,
                data: likeData,
                success: function () {
                    like.textContent = "Like" + addlike;
                }
            });
        return false;
    });

Collectives™ on Stack Overflow

How to run laravel route controller function with jquery ajax in form

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related