submit and fetch data from database in modal with one click without page reload using ajax
<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>