[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.

So far I'm able to add the skill in database, but the ouput field is not updated.

*Field of modal where multiple records will be shown*

```
<form id="skill" method="post" action="{{Route('addSkills')}}" >
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="mj_createaccount_form">
        <div id="myview" class="form-control" rows="3" placeholder="" type="static">
            @foreach($user->Skills as $skill)
                <a href="{{Route('deleteSkill',array($skill->id))}}" class="mj_btn mj_greenbtn"id="myskill"><i class="fa fa-times" >&nbsp&nbsp&nbsp;{{$skill->name}}</i></a>
            @endforeach
        </div>
        <br>
        <br>
        <div class="form-group">
            <select class="form-control" name="jobSkillId" required>
                <option value=>Select Skill</option>
                {{--@foreach($skills as $skill)--}}
                    <option value="1">php{{--{{$skill->id}}">{{$skill->job_skill_name}}--}}</option>
                    <option value="2">laravel</option>
                    <option value="3">c#</option>
                    <option value="4">C++</option>
                {{--@endforeach--}}
            </select>
        </div>
        <div class="form-group">
            <select name="experience"  class="form-control" style="width: 100%;">
                <option>Select one</option>
                <option value=">1">less than 1 Year</option>
                <option value="1">1 Year</option>
                <option value="2">2 Year</option>
                <option value="3">3 Year</option>
                <option value="4">4 Year</option>
                <option value="5">5+ Year</option>
            </select>
        </div>
    </div>
    <div class="mj_pricing_footer">
        <button  class="mj_mainbtn mj_btnyellow" data-text="Add Skill" type="submit" id="submit">Add Skill</button>
    </div>
</form>

```

*Javascript used to submit data*

```
$(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;
});

```

[enter image description here](http://i.stack.imgur.com/oZtyx.jpg)