Create a record using modal bootstrap and ajax?

I'm making a simple blog using Laravel 5.4. I want to know how to create a record with ajax and modal bootstrap so that the page doesn't have to reload every single time a record is added ? I tried following tutorials on the net but I'm still unable to make it working on my project (because I'm really bad at JS).

My current store method :

public function store(Request $request) {
        $input = $request->all();
        $validator = Validator::make($input, [
                    'title' => 'required|string'
        ]);
        if ($validator->fails()) {
            return back()->withErrors($validator)->withInput()->with($this->addTagError);
        } else {
            $tag = Tag::create($input);
        }
        return redirect()->route('tagsindex')->with($this->addTagSuccess);
    }

The route :

Route::post('dashboard/tags', 'TagCon@store')->name('tagstore');

The view :

<div class="alert alert-info fade in">
   <h4>Manage Blog Tags From Here</h4>
     <p>
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#addModal">Add a new Tag</button>
     </p>
     <!-- Add Modal start -->
     <div class="modal fade" id="addModal" role="dialog">
        <div class="modal-dialog">
        <!-- Modal content-->
           <div class="modal-content">
               <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add a new Tag</h4>
               </div>
               <form action="" method="POST" enctype="multipart/form-data">
                  <div class="modal-body">
                  
                      <div class="form-group">
                         <div class="form-group">
                         <label class="control-label">Tag Name<span style="color: red">*</span> :</label>
                         <input type="text" name="title" id="title" class="form-control" value="" />
                         @if ($errors->has('title'))
                         <span class="help-block">
                         <strong></strong>
                         </span>
                         @endif
                         </div>
                      </div>
                   </div>
               <div class="modal-footer">
                  <button type="submit" class="btn btn-info"><span id="" class='glyphicon glyphicon-check'></span> Submit</button>
                  <button type="button" class="btn btn-warning" data-dismiss="modal"><span id="" class='glyphicon glyphicon-remove'></span> Cancel</button>
               </div>
               </form>
            </div>
         </div>
      </div>
   <!-- add modal code ends -->
    </div>

<div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-dark mb30">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Tags Name</th>
                                    <th style="text-align: center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($tags as $indexKey => $t)
                                <tr>
                                    <td></td>
                                    <td><a href=""></a> ()</td>
                                    <td class="table-action">
                                        <a href="" class="tooltips" data-toggle="tooltip" data-placement="top" title="Edit">
                                            <button style=" background: none;">
                                                <i class="fa fa-edit" aria-hidden="true"></i>
                                            </button>
                                        </a>
                                        <a class="tooltips" data-toggle="tooltip" data-placement="top" title="Delete">
                                            <form action="" method="POST">
                                                <input type="hidden" name="_method" value="DELETE">
                                                <input type="hidden" name="_token" value="" />
                                                <button type="submit" style=" background: none;" onclick="return confirm('Anda yakin ?');">
                                                    <i class="fa fa-trash-o" aria-hidden="true"></i>
                                                </button>
                                            </form>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div><!-- table-responsive -->
                </div><!-- col-md-6 -->

The code above works but it will still reloading the page every time a record is added. Sorry that I do not put a single ajax code here because as I said before I don't even know where to start. I'm sure a single example that working with my app will be enough for me to learn it and then create it on my own next time.

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2uePWee
via IFTTT