I am trying to autofill information from a database into text fields when the user selects the specific name. I initialized the text fields with unique names that are dynamically added.
This is the table for the form:
<form name="senarai" id="senarai">
<div class="container table-responsive col-lg-10">
<table class="table table-hover table-responsive table-bordered" id="demo_table">
<thead>
<tr>
<td class="text-center col-lg-1">#</td>
<td class="text-center col-lg-3">Nama</td>
<td class="text-center col-lg-2">No Personal</td>
<td class="text-center col-lg-1">Department</td>
<td class="text-center col-lg-1">Telefon</td>
<td class="text-center col-lg-1">Ext</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
</div>
</div>
<!-- buttons -->
</head>
<div class="form-group">
<div class="row">
<input type="button" class="add-row" value="Add Row">
<button type="button" class="delete-row">Delete Row</button>
</div>
</div>
The javascript below added the text field dynamically. It contains a selection field and text fields which will be filled with information grabbed from the database.
<script>
count=1;
$(document).ready(function(){
$(".add-row").click(function(){
var markup = '<tr><td class="col-lg-3"><input type="checkbox" name="rekod"></td>';
markup += '<td class="col-lg-3"><select id="nama'+ count +'" name="nama[]" class="form-control"><option value="">Choose</option><?php foreach($nama as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td>';
markup += '<td class="col-lg-2"><input type="text" name="nopersonal'+ count +'" value="test"></td>';
markup += '<td class="col-lg-1"><input type="text" name="jabatan'+ count +'"></td>';
markup += '<td class="col-lg-1"><input type="text" name="telefon'+ count +'"></td>';
markup += '<td class="col-lg-1"><input type="text" name="ext'+ count +'"></td></tr>';
$("table tbody").append(markup);
count++;
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="rekod"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
</script>
This is a javascript code to autofill the text fields.
<script type="text/javascript">
jQuery(document).ready(function ()
{
$(document).on('change','#nama'+ count +'',function(){
var ID = jQuery(this).val();
if(ID)
{
jQuery.ajax({
url : 'add_demo/get_nama/'+ID,
type : "GET",
dataType : "json",
success:function(data)
{
console.log(data);
alert($('input[name="nopersonal'+count+'"]').val());//the problem is here
$('input[name="jabatan'+count+'"]').val(data.JabID);
$('input[name="telefon'+count+'"]').val(data.notelttp);
$('input[name="ext'+count+'"]').val(data.ext);
}
});
}
else
{
$('input[name="nopersonal"'+count+']').empty();
$('input[name="jabatan'+count+'"]').empty();
$('input[name="telefon'+count+'"]').empty();
$('input[name="ext'+count+'"]').empty();
}
});
});
</script>
I cannot put id on the text fields, it creates problems and warning in the console. I tried to use text field name property but the dynamic name "nopersonal'+count+'" cannot be identified.
When i tried this:
alert($('input[name="nopersonal'"]').val()); //i put test value in the textfield
The text field can be identified and the value appears in the alert.
How I can fix this issue? Thank you.