Receive data from axios post request in Controller

show your selected variable implementation

Hi rin4ik, this is the part of the template:

<select name="category" id="category">
    <option value="default">Choose one option:</option>
    <option value="1">Action</option>
    <option value="2">Comedy</option>
    ... 
    ... much more options
    ...
</select>

And the variable:

const target = document.getElementById('category');
const selected = target.options[target.selectedIndex].innerText;

When I console.log the variable, it shows the text, for example when the user change the category to Comedy, variable selected holds "Comedy". But the controller just grab the value instead of what I try to send.

You are creating an empty FormData() object and adding selected which needs to be a USVString, Blob or file. You options in the select element need to have values. To use the rest of the form values, you should have something like:

const formElement = document.querySelector("form");
let formData = new FormData(formElement);

JS will sometimes convert the text 1 to the number 1. To avoid that issue, either cast a string or use a different value like the "action".

Hi ejdelmonico, I've added the form into FormData() object, but it seems like the problem persists.

I've also tried to send an empty string like this:

const data = ' ';

axios.post('http://127.0.0.1:8000/cars', data)
        .then(
                response => console.log(response.data)
            ).catch(
                error => console.log(error)
            )

And when I dd($request->all()) in my Controller, I still get all of the fields with the values. So it seems like the post request is made, but the data is just ignored. Now I'm really confused and just don't get it. :/

Data should be an object. Try constructing a sample data object with fake form values. See if you get the proper results.

Still the same result. I can have just one input and the data variable like this:

const data = { title: 'hello' };

But when I try to send it with axios, my controller completely ignores it and just grab the values by itself.

Hmm, well better post the controller and the form to troubleshoot.

I've made a simple form to troubleshoot with the same case. This is the template:

<form id="formpost" method="POST"
 action="/posts" acceptCharset="UTF-8">
        <input name="title" type="text" />
        <button type="submit">Submit</button>
</form>

To avoid Token mismatch exception, I've exclude the route '/posts' in VerifyCsrfToken.php file. The JS file:

import axios from 'axios';

const form = document.getElementById('formpost');

const formData = new FormData(form);
formData.append('title', 'The frustration with post request');

form.onsubmit = () => axios.post('/posts', formData)
                            .then(response => response.data);

Finally the controller:

class PostsController extends Controller
{
    public function store(Request $request) 
    {
        dd($request->all());
    }
}

And the route:

Route::post('/posts', 'PostsController@store');