Skip to main content

Laravel CRUD Series: Inserting Data using AJAX


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.

  1. <div class="modal fade" id="addnew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  2. <div class="modal-dialog" role="document">
  3. <div class="modal-content">
  4. <div class="modal-header">
  5. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  6. <h4 class="modal-title text-center" id="myModalLabel">Add New Member</h4>
  7. </div>
  8. <div class="modal-body">
  9. <form action="{{ URL::to('save') }}" id="addForm">
  10. <div class="form-group">
  11. <div class="row">
  12. <div class="col-md-2" style="margin-top:7px;">
  13. <label for="firstname">Firstname</label>
  14. </div>
  15. <div class="col-md-10">
  16. <input type="text" name="firstname" class="form-control" placeholder="Input Firstname" required>
  17. </div>
  18. </div>
  19. </div>
  20. <div class="form-group">
  21. <div class="row">
  22. <div class="col-md-2" style="margin-top:7px;">
  23. <label for="lastname">Lastname</label>
  24. </div>
  25. <div class="col-md-10">
  26. <input type="text" name="lastname" class="form-control" placeholder="Input Lastname" required>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. <div class="modal-footer">
  32. <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
  33. <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save</button>
  34. </form>
  35. </div>
  36. </div>
  37. </div>
  38. </div>

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

  1. <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:

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.  
  4. $.ajaxSetup({
  5. headers: {
  6. 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  7. }
  8. });
  9.  
  10. showMember();
  11.  
  12. $('#add').click(function(){
  13. $('#addnew').modal('show');
  14. $('#addForm')[0].reset();
  15. });
  16.  
  17. $('#addForm').on('submit', function(e){
  18. e.preventDefault();
  19. var form = $(this).serialize();
  20. var url = $(this).attr('action');
  21. $.ajax({
  22. type: 'POST',
  23. url: url,
  24. data: form,
  25. dataType: 'json',
  26. success: function(){
  27. $('#addnew').modal('hide');
  28. showMember();
  29. }
  30. });
  31. });
  32.  
  33. });
  34.  
  35. function showMember(){
  36. $.get("{{ URL::to('show') }}", function(data){
  37. $('#memberBody').empty().html(data);
  38.  
  39. })
  40. }
  41. </script>

Updating our MemberController

Next, open our MemberController and add the ff codes:

  1. public function save(Request $request){
  2. if ($request->ajax()){
  3. // Create New Member
  4. $member = new Member;
  5. $member->firstname = $request->input('firstname');
  6. $member->lastname = $request->input('lastname');
  7. // Save Member
  8. $member->save();
  9.  
  10. return response($member);
  11. }
  12. }

Creating our Route

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

  1. Route::post('/save', '[email protected]');

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 :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.