3

Here's 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, I get error from form request that the fields are required. It seems that the form request is not getting the form data. And when I use Request and remove ProjectAddRequest in the function, nothing is printed out.

1 Answer 1

8

Remove the curly braces from the formData when passing 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>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.