Ajax code for search in html

<div class="container">
  <div class="row">
    <div class="col">
<form method="post" action="/add-man" enctype="multipart/form-data">
  <div class="form-row">
  <input type="hidden" name="_token" value="{{ csrf_token() }}" />    
  </div>
  <div class="form-group">
    <label for="inputPoojaId">Pooja Id</label>
    <input type="text"  value="" class="form-control" required  id="inputPoojaId" placeholder="Pooja Id">
    <input type="hidden" name="pooja_id" value="" id="pooja_id" class="form-control" required >
    <select class="form-control" id="srch_id">
      
    </select> 
  </div>
  <div class="form-group">
    <label for="inputDescription">Name</label>
    <input type="text" name="name" class="form-control" required  id="inputName" placeholder="Name">   
  </div>
  <div class="form-group">
    <label for="inputDescription">Description</label>
    <textarea name="description" class="form-control" required  id="inputDescription" placeholder="Description"></textarea>  
  </div>
  <div class="form-group">
    <label for="inputDate">Duration</label>
    <input type="text" class="form-control" required  name="duration" id="inputDuration" placeholder="40:77:55">
  </div>
 <button type="submit" class="btn btn-primary">Add</button>
</form>
    </div>    
  </div>
</div>

<script>
  $(document).ready(function () {
    $('#srch_id').hide();
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    $("#inputPoojaId").keyup(function(){ 
      var str=$(this).val();
      
       $.get('api/get-pooja/'+str, function (data) {
        $("#srch_id").html('');
        $('#srch_id').show();
        var obj = JSON.parse(data);
        $("#srch_id").append('<option>Select pooja</option>');
         for(var d in obj)
         {
           $("#srch_id").append('<option value='+obj[d]['id']+'>'+obj[d]['name']+'</option>');
         }

      })  
    });       
  
  });
  $('#srch_id').on('change', function (e) {
   var id=$(this).val();
   $("#pooja_id").val(id);
   $("#inputPoojaId").val($( "#srch_id option:selected" ).text());
   $(this).hide();
});
 
</script>

Leave a Reply