How to get ajax formData form in laravel 5.1?

Here is my form:

    {!! Form::open(['route' => 'postAddProject', 'id' => 'addProjectForm', 'files' => true]) !!}

    <div class="form-group">
            {!! Form::label('name', 'Name') !!}

            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-pencil-square-o"></i></span>
                {!! Form::text('name', old('name'), ['class' => 'form-control', 'id' => 'name', 'placeholder' => 'Name']) !!}
            </div>

            <p class="text-danger" id="name-error"></p>
        </div>

        <div class="form-group">
            {!! Form::label('link', 'Link') !!}

            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-external-link"></i></span>
                {!! Form::text('link', old('link'), ['class' => 'form-control', 'id' => 'link', 'placeholder' => 'Link']) !!}
            </div>

            <p class="text-danger" id="link-error"></p>
        </div>

        <div class="form-group">
            {!! Form::label('image', 'Image') !!}

            {!! Form::file('image', ['id' => 'image']) !!}

            <p class="text-danger" id="image-error"></p>
        </div>

        <div class="form-group">
            <button class="btn btn-success" id="project-button">Add</button>
        </div>

{!! Form::close() !!}

      

Here's my ajax code:

<script>
var form = $('#postAddProject');
var button = $('#project-button');
var name = $('#name');
var link = $('#link');
var image = $('#image');
var token = $('input[name=_token]');
var message = $('#message');

var name_error = $('#name-error');
var link_error = $('#link-error');
var image_error = $('#image-error');

button.click(function (event){

event.preventDefault();

var formData = new FormData();
formData.append('name', name.val());
formData.append('link', link.val());
formData.append('image', image[0].files[0]); 

$.ajax({
url: form.attr('action'),
method: 'post',
dataType: 'json',
contentType: false,
processData: false,

headers: {
    'X-CSRF-TOKEN': token.val()
},

data: {
    formData
},

error: function (data) {

    if (data.status === 422) {

         name_error.html(data.responseJSON.name);
         link_error.html(data.responseJSON.link);
         image_error.html(data.responseJSON.image);

    } else {

         alert('success');
    }
}
</script>

      

Here's my form request file:

class ProjectAddRequest extends Request
{
    public function rules()
    {
        return [
            'name' => 'required|max:255',
            'link' => 'required|url|max:255',
            'image' => 'required|image'
        ];
    }
}

      

Here's my controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Requests\ProjectAddRequest;
use App\Http\Controllers\Controller;

class ProjectController extends Controller
{
    public function postAddProject(ProjectAddRequest $request)
    {
        dd($request->input->all());
    }
}

?>

      

When I submit the form with all the input filled in, I get an error from the form request that the fields are required. It seems that the form request is not receiving the form data. And when I use Request and remove the ProjectAddRequest in this function, nothing is printed.

+3


source to share


1 answer


Remove the curly braces from the Data form when navigating to the jquery parameter.



<script>
var form = $('#postAddProject');
var button = $('#project-button');
var name = $('#name');
var link = $('#link');
var image = $('#image');
var token = $('input[name=_token]');
var message = $('#message');

var name_error = $('#name-error');
var link_error = $('#link-error');
var image_error = $('#image-error');

button.click(function (event){

event.preventDefault();

var formData = new FormData();
formData.append('name', name.val());
formData.append('link', link.val());
formData.append('image', image[0].files[0]); 

$.ajax({
url: form.attr('action'),
method: 'post',
dataType: 'json',
contentType: false,
processData: false,

headers: {
    'X-CSRF-TOKEN': token.val()
},

data: formData,

error: function (data) {

    if (data.status === 422) {

         name_error.html(data.responseJSON.name);
         link_error.html(data.responseJSON.link);
         image_error.html(data.responseJSON.image);

    } else {

         alert('success');
    }
}
</script>

      

+7


source







All Articles