Laravel CRUD Series: Inserting Data using AJAX

Submitted by: 
Language: 
Visitors have accessed this post 310 times.

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', '<a href="mailto:[email protected]" rel="nofollow">[email protected]</a>');

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

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.