how to send variable values from JavaScript to Controller in Laravel 5.1

Question

I have a form with the field

<input type="hidden" name="user_id" id="user-id" value="">

I am setting the field value through javascript on button click(not form submission). I want to pass this value from javascript or from php to Controller. I searched for it and I found that ajax will be used for this. This is what I tried so far

$.ajax({
        url: 'localhost:8000/test',
        type: 'POST',
        data: { id: 1 },
        success: function()
        {
            alert("Settings has been updated successfully.");
        }
    });

I am beginner in Javascript and I have no idea about ajax too much. Please lead me in the right direction.(The above ajax is not working)
UPDATE
I get this error when I click the button

POST http://localhost:8000/test 500 (Internal Server Error)x.ajaxTransport.send @ jquery-1.10.2.min.js:6x.extend.ajax @ jquery-1.10.2.min.js:6openMessageBox @ js.js:28

and this is how I am calling the ajax request, openMessageBox on click of a button

function openMessageBox(){
        $.ajax({ //line 28
        url: 'test',
        type: 'POST',
        data: { id: $('#user-id').val() },
        success: function()
        {
            alert("Settings has been updated successfully.");
        }
    });
}

i am just testing with id:1 @Satpal

StealthTrails
– StealthTrails

2015-08-31 08:21:53 +00:00
Commented Aug 31, 2015 at 8:21 — StealthTrails
– StealthTrails, Commented Aug 31, 2015 at 8:21

StealthTrails · Accepted Answer · 2015-08-31 19:30:42Z

1

To get an ajax call to work for a Laravel application you will need 2 things:

The Route setting up in you routes file

Add the following line to your routes file, by default this will be in app/Http/routes.php:

Route::post('/test', 'Controller@method');
//Please change `Controller` to be the actual name of the controller and `method` to be the method name in that controller.

For more information please refer to the documentation http://laravel.com/docs/5.1/routing

CSRF Token (assuming you've not removed the CSRF middleware or disabled it for this route)

The easiest way to go about adding the CSRF token would be to just add it to you ajax request data i.e.

data: {_token: {{ csrf_token() }}, id: 1}

but I'd assume you're going to be using more than a few ajax requests so what you're going to be better off doing is adding a meta tag inside the <head> tag in your main layout template(s)

<meta name="csrf_token" value="{{ csrf_token() }}">

and then adding somewhere this after where you're pulling in jQuery:

<script>
$(function () {

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('value')
        }
    });
}); 
</script>

This way you won't have to include the token inside your ajax data.

Just FYI, most modern browsers have an inspector console which (amongst other things) will allow you to see what responses you're getting back from the server with an ajax requests (and much more). In Chrome for example just right click on the page, click inspect element and then click on the network tab. You will need to have it open before the request is sent. This will allow you to see if Laravel is throwing any errors.

Hope this helps!

edited Aug 31, 2015 at 19:30

StealthTrails

2,4138 gold badges47 silver badges70 bronze badges

answered Aug 31, 2015 at 9:53

Rwd

35.3k7 gold badges71 silver badges85 bronze badges

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

7 Comments

StealthTrails Over a year ago

please see my updated question. I have added <meta id="csrf_token" value="{{ csrf_token() }}" to the head tag and the code that you asked to add after pulling jquery too.

Rwd Over a year ago

@Adamnick What was the 500 error? If you click on the request in the network tab and then click on the preview tab it should show you what the error is. If it only shows you a Whoops message and nothing else then you'll need to go in to you .env and change debug to true.

StealthTrails Over a year ago

Whoops, looks like something went wrong. 1/1 TokenMismatchException in VerifyCsrfToken.php line 53:

Rwd Over a year ago

That error is caused because the csrf token isn't being sent. Just double check that the meta tag has > at the end of it (my bad).

StealthTrails Over a year ago

your answer is correct but there was only one mistake. Please change id to name in <meta id="csrf_token" value="{{ csrf_token() }}"> as <meta name="csrf_token" value="{{ csrf_token() }}"> that's why error was being thrown.

|

Collectives™ on Stack Overflow

how to send variable values from JavaScript to Controller in Laravel 5.1

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related