Laravel CRUD Series: Inserting Data using AJAX

Submitted by nurhodelta_17 on Saturday, November 11, 2017 - 21:34.

Getting Started

As a continuation of our previous tutorial, Laravel CRUD Series: Fetching Data using AJAX, where going to insert data to our database.

Creating our Add Modal

In our modal.blade.php that we have created in previous tutorial, add the ff codes to create our modal.

<div class="modal fade" id="addnew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
                <div class="modal-content">
                        <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title text-center" id="myModalLabel">Add New Member</h4>
                        </div>
                        <div class="modal-body">
                                <form action="{{ URL::to('save') }}" id="addForm">
                                <div class="form-group">
                                                <div class="row">
                                                <div class="col-md-2" style="margin-top:7px;">
                                                        <label for="firstname">Firstname</label>
                                                </div>
                                                <div class="col-md-10">
                                                        <input type="text" name="firstname" class="form-control" placeholder="Input Firstname" required>
                                                </div>
                                        </div>
                                </div>
                                <div class="form-group">
                                        <div class="row">
                                                <div class="col-md-2" style="margin-top:7px;">
                                                        <label for="lastname">Lastname</label>
                                                </div>
                                                <div class="col-md-10">
                                                        <input type="text" name="lastname" class="form-control" placeholder="Input Lastname" required>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                                <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save</button>
                                </form>
                        </div>
                </div>
        </div>
</div>

Make sure that the button to toggle this modal looks like this:

<button type="button" id="add" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Member</button>

Creating our Add Script

Next, update our script in show.blade.php with the ff codes:

<script type="text/javascript">
                $(document).ready(function(){
                        
                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });
 
                        showMember();
 
                        $('#add').click(function(){
                                $('#addnew').modal('show');
                                $('#addForm')[0].reset();
                        });
 
                        $('#addForm').on('submit', function(e){
                                e.preventDefault();
                                var form = $(this).serialize();
                                var url = $(this).attr('action');
                                $.ajax({
                                        type: 'POST',
                                        url: url,
                                        data: form,
                                        dataType: 'json',
                                        success: function(){
                                                $('#addnew').modal('hide');
                                                showMember();
                                        }
                                });
                        });
 
                });
 
                function showMember(){
                        $.get("{{ URL::to('show') }}", function(data){
                        $('#memberBody').empty().html(data);
                        
                        })
                }
</script>

Updating our MemberController

Next, open our MemberController and add the ff codes:

public function save(Request $request){
        if ($request->ajax()){
                // Create New Member
                $member = new Member;
                $member->firstname = $request->input('firstname');
                $member->lastname = $request->input('lastname');
                // Save Member
                        $member->save();
                
                return response($member);
        }
    }

Creating our Route

Next, we add this route to our web.php file located in routes folder.

Route::post('/save', 'MemberController@save');

Running our Server

Lastly, we run our server by typing our localhost name in our web browser. In my case, mysite.dev. You should now be able to add new row to your database. That ends this tutorial. Please stay tune for the next chapter of this CRUD series. Happy Coding :)

Add new comment

524 views