Javascript – Submit form laravel using AJAX

ajaxjavascriptjquerylaravel-4php

I am trying to add comment using AJAX technology but I have an error:
Failed to load resource: http://localhost:8888/blog/public/comment/add the server responded with a status of 500 (Internal Server Error)
Here is my code:
View: 

{{ Form::open(array('method'=>'post','class'=> 'col-md-6','url' => '/comment/add', 'id'=>'comment')) }}
                        <input type="hidden" name="post_id" value="{{$id}}">
                        <div class="row">
                            <div class="inner col-xs-12 col-sm-12 col-md-11 form-group">
                                {{Form::label('name', 'Imię')}}
                                {{Form::text('username', null, array('class'=>'form-control', 'id'=>'name', 'name'=>'name'))}}
                            </div>
                            <div class="inner col-xs-12 col-sm-12 col-md-12 form-group">
                                {{Form::label('message', 'Wiadomość')}}
                                {{Form::textarea('message', null, array('class'=>'form-control', 'id'=>'message', 'name'=>'message', 'rows'=>'5'))}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 col-md-12 submit form-group">
                                {{Form::submit('Wyślij', array('name'=>'submit', 'class'=>'btn btn-orange'))}}
                            </div>
                        </div>

                    {{ Form::close() }}

Controller:

public function addComment()
{
        $this->layout = null;
        //check if its our form
        if(Request::ajax()){
            $name = Input::get( 'name' );
            $content = Input::get( 'message' );

            $comment = new Comment();
            $comment->author =  $name;
            $comment->comment_content = $content;
            $comment->save();

            $postComment = new CommentPost();
            $postComment->post_id = Input::get('post_id');
            $postComment->comment_id = Comment::max('id');
            $postComment->save();

            $response = array(
                'status' => 'success',
                'msg' => 'Setting created successfully',
            );
            return 'yea';
        }else{
            return 'no';
        }
}

AJAX:

    jQuery( document ).ready( function( $ ) {

    $( '#comment' ).on( 'submit', function(e) {
        e.preventDefault();

        var name = $(this).find('input[name=name]').val();

        $.ajax({
            type: "POST",
            url: host+'/comment/add',
        }).done(function( msg ) {
            alert( msg );
        });

    });
});

And the last one routes:

Route::post('comment/add', 'CommentController@addComment');

Anyone have an idea where is the problem and why I can't submit my form?

Best Solution

You are not posting any data, 

    $.ajax({
        type: "POST",
        url: host+'/comment/add',
    }).done(function( msg ) {
        alert( msg );
    });

The error you are getting is that the columns in DB cannot be null.

Try to change your ajax call to this:

    $.ajax({
        type: "POST",
        url: host+'/comment/add',
        data: { name:name, message:message, post_id:postid }, 
        success: function( msg ) {
            alert( msg );
        }
    });

Change this 

var name = $(this).find('input[name=name]').val();

to

var name = $('#name').val();

and fetch the message and the post id:

var message = $('#message').val();
var postid = $('#post_id').val();

Complete ajax block:

   $('#comment').on('submit', function(e) {
       e.preventDefault(); 
       var name = $('#name').val();
       var message = $('#message').val();
       var postid = $('#post_id').val();
       $.ajax({
           type: "POST",
           url: host+'/comment/add',
           data: {name:name, message:message, post_id:postid}
           success: function( msg ) {
               alert( msg );
           }
       });
   });

And finally, add an ID to the hidden field:

<input type="hidden" name="post_id" id="post_id" value="{{$id}}">

Send data back from Laravel controller, eg.

    // ........

        $response = array(
            'status' => 'success',
            'msg' => 'Setting created successfully',
        );
        return Response::json($response);  // <<<<<<<<< see this line
    }else{
        return 'no';
    }
}

This will send the data in your response back to your ajax request.

Then, alter your ajax success function:

 // .......
 success: function( msg ) {
     $("body").append("<div>"+msg+"</div>");
 }

 // ..........

You will now see that a new div was created in your <body> including the created response. If you want to show the newly created post, just create it as the ajax response and append it to any element in your page.

Related Question