title: submit and fetch data from database in modal with one click without page reload using ajax
body: <p>[i enter image you can check demo]I'm developing a modal dialog that enables the user to add skills. The modal contains three fields: two input fields and one output field.
  When the user adds a skill, I want to update the output field (and update the database) without reloading the modal.</p>
  
  <p>So far I'm able to add the skill in database, but the ouput field is not updated.</p>
  
  <p><em>Field of modal where multiple records will be shown</em></p>
  
  <pre><code>&lt;form id="skill" method="post" action="{{Route('addSkills')}}" &gt;
      &lt;input type="hidden" name="_token" value="{{ csrf_token() }}"&gt;
      &lt;div class="mj_createaccount_form"&gt;
          &lt;div id="myview" class="form-control" rows="3" placeholder="" type="static"&gt;
              @foreach($user-&gt;Skills as $skill)
                  &lt;a href="{{Route('deleteSkill',array($skill-&gt;id))}}" class="mj_btn mj_greenbtn"id="myskill"&gt;&lt;i class="fa fa-times" &gt;&amp;nbsp&amp;nbsp&amp;nbsp;{{$skill-&gt;name}}&lt;/i&gt;&lt;/a&gt;
              @endforeach
          &lt;/div&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;div class="form-group"&gt;
              &lt;select class="form-control" name="jobSkillId" required&gt;
                  &lt;option value=&gt;Select Skill&lt;/option&gt;
                  {{--@foreach($skills as $skill)--}}
                      &lt;option value="1"&gt;php{{--{{$skill-&gt;id}}"&gt;{{$skill-&gt;job_skill_name}}--}}&lt;/option&gt;
                      &lt;option value="2"&gt;laravel&lt;/option&gt;
                      &lt;option value="3"&gt;c#&lt;/option&gt;
                      &lt;option value="4"&gt;C++&lt;/option&gt;
                  {{--@endforeach--}}
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;select name="experience"  class="form-control" style="width: 100%;"&gt;
                  &lt;option&gt;Select one&lt;/option&gt;
                  &lt;option value="&gt;1"&gt;less than 1 Year&lt;/option&gt;
                  &lt;option value="1"&gt;1 Year&lt;/option&gt;
                  &lt;option value="2"&gt;2 Year&lt;/option&gt;
                  &lt;option value="3"&gt;3 Year&lt;/option&gt;
                  &lt;option value="4"&gt;4 Year&lt;/option&gt;
                  &lt;option value="5"&gt;5+ Year&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="mj_pricing_footer"&gt;
          &lt;button  class="mj_mainbtn mj_btnyellow" data-text="Add Skill" type="submit" id="submit"&gt;Add Skill&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><em>Javascript used to submit data</em></p>
  
  <pre><code>$(document).ready(function() {
      $('#skill').on('submit', function (e) {
          e.preventDefault();
          $.ajax({
              url: 'addSkills',
              data: $('form').serialize(),
              type: 'POST',
              dataType: "json",
              success: function() {
                  $('form').reset();
              },
              complete: function() {
                  $('#skill').each(function(){
                  this.reset();//Here form fields will be cleared.
              });
          }
      });
      return false;
  });
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/oZtyx.jpg" rel="nofollow">enter image description here</a></p>