submit and fetch data from database in modal with one click without page reload using ajax

Question

[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

Answer 1

If I could understand his problem, @Mudassir wants to submit and fetch records on the same time.

You need to write an ajax which will be fired on submit and also fetch data on same function call. I would rather say for less data go for ajax, if you want to pull out all data around thousand at time then ajax is not good sol. at all.

Node or some other server scripts are best. I am showing sample code to implement.

$("button").on('submit',function(){
 $.ajax({
   url: someurl,
   _token : $("input[name='_token']").val(),//this requires in laravel for security
   type: post,
   dataType: 'json',
   data: {
        'skill_id' : $("select[name='jobSkillId']").val(),
        'experience' : $("select[name='experience']").val()
    },
   success: function(json) {
     $.each(json, function(key, value) {
            $('.your_view_to_show ul').append($("<option</option>").attr("value", value.id).text(value.name));
        });
   }
});

I feel, am able to answer what you need. Thanks.

Answer 2

in routes.php

//skill
Route::get('/skill','SkillController@viewskill');
Route::post('/addSkills','SkillController@addskill');

in SkillController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Skill;

class SkillController extends Controller
{
    //

    public function viewskill(){

        return view('skill');
    }

    public function addskill(Request $request)
    {
        if($request->ajax()){

        $skill=Skill::create($request->all());
        $data=Skill::all();
        return response()->json($data);


        }
    }
}

in skill.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Customer Info</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  {!!Html::script('../resources/assets/js/jquery.min.js')!!}
  {!!Html::script('../resources/assets/js/bootstrap.min.js')!!}
</head>
<body>

<div class="container">
    <div class="panel panel-default">



        <div class="panel-body">

            @include('modalshow')

            <button type="button" class="btn btn-success btn-modaldata">

                Add Skill

            </button>   

        </div>

    </div>
</div>
<script type="text/javascript">

        //-----------------------------------


        $('.btn-modaldata').on('click',function(){


            $('#modalshow').modal('show');
        });

        //------------------------------

        //after submit modal form
        $('#frmskill').on('submit',function(event){
            console.log('hello');
            event.preventDefault();
            var form=$('#frmskill');

            var formData=form.serialize();
            console.log(formData);
            var url=form.attr('action');



            var type='post';


            $.ajax({
                type:type,
                url:url,
                data:formData,
                success:function(data)
                {
                    console.log("success");
                    console.log(data);
                    console.log(data.length);

                    var output=" ";
                    output+="<h3><strong>Outputs</strong></h3>";

                     for(var i=0;i<data.length;i++){
                        output+="skill Name: "+data[i]['jobSkillId']+" , ";
                        output+="Experience "+data[i]['experience']+"<br/>";
                    }

                    $('.viewdata').html(output);

                },
                error:function(data){
                    console.log("fail");
                }
            }); 
        });
</script>
</body>

</html>

in modalshow.blade.php (Modal)

<!-- Modal -->
  <div class="modal fade" id="modalshow" 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">Skills Info</h4>
        </div>
        <div class="modal-body">
          <form action="addSkills" method="post" id="frmskill">

              <div class="row">



                  <!-- skill-->
                    <div class="col-lg-6 col-sm-6">
                    <div class="form-group">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">


                        <select class="form-control" name="jobSkillId" id="jobSkillId" required>
                                <option value=>Select Skill</option>
                                <option value="1">php</option>
                                <option value="2">laravel</option>
                                <option value="3">c#</option>
                                <option value="4">C++</option>

                        </select>

                    </div>
                  </div>

                   <!-- experienced-->
                    <div class="col-lg-6 col-sm-6">
                    <div class="form-group">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">


                        <select name="experience"  id="experience" class="form-control">
                            <option>Select one</option>
                                <option value="0">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>


              {{-- output will be print here --}}
              </div>
              <!-- end row clss -->

               <div class="row">
                  <!-- first name -->
                <div class="col-lg-12 col-md-12 col-sm-13">

                    <div class="viewdata">

                    </div>

                </div>
              </div>

        </div>

        <div class="modal-footer">
          <input type="submit"  class="btn btn-primary customclose">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </form>

      </div>

    </div>
  </div>

Skill.php (Model)

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Skill extends Model
{



   protected $table = 'skills';
   protected $fillable =  ['jobSkillId', 'experience'];
}

in Database table

in Modal view