I trying to autofill my form but everything is okay data return from my database table but my form does not fill auto please suggest me what will I do now.I am uploading all my code.This is form and js code
<div class="col-md-7">
<div class="form-group">
{{Form::label('reg_id','Student Registration Number')}}
{!! Form::text('reg_id', null, array('id'=>'reg_id','placeholder' => 'Enter Student Registration Number','class' => 'form-control')) !!}
</div>
<div class="form-group">
{{Form::label('Name','Student Name')}}
{!! Form::text('name', null, array('id'=>'name','placeholder' => 'Enter Student Name','class' => 'form-control')) !!}
</div>
<div class="form-group">
{{Form::label('Email','Student Email')}}
{!! Form::email('email', null, array('id'=>'email','placeholder' => 'Enter Student Email','class' => 'form-control')) !!}
</div>
<div class="form-group">
{{Form::label('Department','Department ')}}
{{csrf_field()}}
<select name="department" class="form-control" id=>'department_id'>
<option value=" ">----Select Department-----</option>
{{--@foreach($department as $value)
<option value="{{$value->id}}">{{$value->name}}</option>
@endforeach--}}
</select>
</div>
</div>
//jQuery code
$('#reg_id').autocomplete({
source : '{!!URL::route('autocomplete')!!}',
minlenght:3,
autoFocus:true,
select:function(event,ui){
$('#reg_id').val(ui.item.value);
}
});
//Here is the controller code:
public function autocomplete(Request $request)
{
$term=$request->term;
$data = Student::where('reg_id','LIKE','%'.$term.'%')->with('department')
->take(10)
->get();
$result=array();
foreach ($data as $key => $v){
$result[]=['reg_id' =>$v->reg_id,'name'=>$v->name,'email'=>$v->email,'department_id'=>$v->department_id];
}
return response()->json($result);
}
//And Route code also:
Route::get("/autocomplete",array('as'=>'autocomplete','uses'=> 'EnrollCourseController@autocomplete'));
Look I'm giving here the functionality here only.
Please Implement this in your project...
HTML
<link href="https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7">
<div class="form-group">
<label for='reg_id'>Student Registration Number</label>
<input type="text" id='reg_id' placeholder = 'Enter Student Registration Number' class = 'form-control' />
</div>
<div class="form-group">
<label for='Name'>Student Name</label>
<input type="text" id='Name' placeholder = 'Enter Student Name' class = 'form-control' />
</div>
<div class="form-group">
<label for='Email'>Student Email</label>
<input type="email" id='Email' placeholder = 'Enter Student Email' class = 'form-control' />
</div>
<div class="form-group">
<label for='Department'>Department</label>
<select name="department" class="form-control" id='department_id'>
<option value=" ">----Select Department-----</option>
<option value="1">Department 1</option>
<option value="2">Department 2</option>
<option value="3">Department 3</option>
<option value="4">Department 4</option>
<option value="5">Department 5</option>
<option value="6">Department 6</option>
</select>
</div>
<p id="error" style="color:red;"></p>
</div>
jQuery
The focusout()
function works when you enter the reg_id and focused out. Go to the submit.php
page by AJAX
where you use the mysql
for fetching data.
<script>
$('#reg_id').focusout(function(e) {
var reg_id = $(this).val();
$.ajax({
url : 'submit.php',
type : 'POST',
data : {'reg_id':reg_id},
timeout : 30000,
success : function(e) {
if(e==0){ //Show error if data not found.
$('#error').html('Data not found');
$('#Name').val('');
$('#Email').val('');
$('#department_id').val(' ');
}
else {assign value to each input by json
$('#error').html('');
r = $.parseJSON(e); //convert json to array
$('#Name').val(r.name); //assign name value
$('#Email').val(r.email); //assign email value
$('#department_id').val(r.department); //assign department value
}
}
});
});
</script>
submit.php
Suppose the below array is the database table
<?php
$array = array(
array(
'reg_id' => '1100',
'name' => 'AB',
'email' => 'ab@gmail.com',
'department' => 1,
),
array(
'reg_id' => '1102',
'name' => 'BC',
'email' => 'bc@gmail.com',
'department' => 4,
),
array(
'reg_id' => '1103',
'name' => 'CD',
'email' => 'cd@gmail.com',
'department' => 3,
),
array(
'reg_id' => '1104',
'name' => 'DE',
'email' => 'de@gmail.com',
'department' => 5
),
array(
'reg_id' => '1105',
'name' => 'EF',
'email' => 'ef@gmail.com',
'department' => 3,
)
);
foreach is as select query by which you get only single row from database.
foreach($array as $r){
if($_POST['reg_id']==$r['reg_id']) {
echo json_encode($r);die; // return the json of values
}
}
echo 0; die;
?>