How to make autofill into add/remove field dynamically using jquery?

I am doing a program using laravel. I use add/remove field with jquery. The first field grab the data from database to list out the person’s name.

     <div class="container table-responsive col-lg-10">
<form method="post" id="dynamic_form">
<span id="result"></span>
<table class="table table-hover table-responsive table-bordered" id="user_table">
<thead>
<tr>
<td class="text-center col-lg-3">Nama</th>
<td class="text-center col-lg-2">No Personal</th>
<td class="text-center col-lg-1">Jabatan</th>
<td class="text-center col-lg-1">Telefon</th>
<td class="text-center col-lg-1">Ext</th>
<td class="text-center col-lg-1">Action</th>
</tr>
</thead>
<tbody>

</tbody>
<tfoot>
<tr>
<td colspan="2" align="right">&nbsp;</td>
<td></td>
</tr>
</tfoot>
</table>
</div>
<script>
$(document).ready(function(){

var count = 1;

dynamic_field(count);

function dynamic_field(number)
{
html = '<tr>';
html += '<td><select id="nama" name="nama[]" class="form-control"><option value="">--Pilih--</option><?php foreach($staff as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td>';
html += '<td><input type="text" name="no_personal[]" class="form-control" /></td>';
html += '<td><input type="text" name="jabatan[]" class="form-control" /></td>';
html += '<td><input type="text" name="telefon[]" class="form-control" /></td>';
html += '<td><input type="text" name="ext[]" class="form-control" /></td>';
if(number > 1)
{
html += '<td class="text-center"><button type="button" name="remove" id="" class="btn btn-danger remove">Batal</button></td></tr>';
$('tbody').append(html);
}
else
{
html += '<td class="text-center"><button type="button" name="add" id="add" class="btn btn-success">Tambah Pegawai</button></td></tr>';
$('tbody').html(html);
}
}

$(document).on('change', '.nama', function(){
var staffID = jQuery(this).val();
if(staffID)
{
jQuery.ajax({
url : 'add_demo/get_staff/'+staffID,
type : "GET",
dataType : "json",
success:function(data)
{
console.log(data);
$('#no_personal').val(data.Nobadan);
$('#jabatan').val(data.SectionID);
$('#telefon').val(data.notelttp);
$('#ext').val(data.ext);
}
});
}
else
{
$('#no_personal').empty();
$('#jabatan').empty();
$('#telefon').empty();
$('#ext').empty();
}
});


$(document).on('click', '#add', function(){
count++;
dynamic_field(count);
});

$(document).on('click', '.remove', function(){
count--;
$(this).closest("tr").remove();
});

});
</script>

When the first field(staff name)selected,the information about no_personal, jabatan, telefon and ext will be filled automatically into the field. The information grabbed using this ajax url:

 url : 'add_demo/get_staff/'+staffID,

The controller for that is:

$data = staffs::where('staffID', $staffID)
->select('staffs.No_pers', 'staffs.JabID', 'staffs.notel', 'staffs.ext')
->first();

return json_encode($data);

I can list out the staff name in the selection box. But when I selected the staff name, the information is not filled into the fields.

How to improvised the code? I tried to put id in the added fields, but it gives error of same id name for added fields.

from Newest questions tagged laravel-5 – Stack Overflow https://ift.tt/3aKT2sp
via IFTTT

Related Posts

Codeigniter : Parse error: syntax error, unexpected ‘const’ (T_CONST), expecting variable (T_VARIABLE) in Laravel project

I’m getting following error: **Parse error: syntax error, unexpected ‘const’ (T_CONST), expecting variable (T_VARIABLE)** Note : It’s working in local but facing issue in production server. private…

Firebase receive notification while tab is active or on focus

What i want is to be able to perform an action when a user receives a notification while the browser is open and tab is active or…

Laravel’s alias loader does not find class

We have a legacy project that we cannot update and we need to make some changes in symfony’s Response.php in vendor. We have solved this by copying…

Laravel 5 – generic document management

I have a system where you can create different types of unique documents. For instance, one document is called Project Identified and this expects certain inputs. Originally,…

Laravel Nova limit the results in indexQuery

I ran intro a situation where I need to limit the results of a resource to only 3 results. To be more specific, based on the logged…

Auditoria en laravel 5.8 [closed]

Cómo puedo automatizar el registro de actividades de un usuario en laravel? Si un usuario ingresa a un app de laravel, debo guardar toda su actividas, a…

Leave a Reply

Your email address will not be published.