I had add/remove fields dynamically using jquery in laravel 5. In the dynamic field, there is a selection field which will autofill the other dynamic textfields. However, the dynamic selection is named as an array 'pegawai[]'. If using id, it will be easier. But I don't know how to make on change selection using array textfield name.
This is the code for the fields:
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td col-lg-3><select id="name[]" name="name[]" class="form-control"><option value="">Nama Pegawai</option><?php foreach($pegawai as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td>
<td><input type="text" name="nobadan[]" placeholder="No Badan" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
This is the dynamic added js code:
<script type="text/javascript">
$(document).ready(function(){
var postURL = "<?php echo url('addmore'); ?>";
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><select id="pegawai[]" name="pegawai[]" class="form-control name-list"><option value="">Nama Pegawai</option><?php foreach($pegawai as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td><td><input type="text" name="nobadan[]" placeholder="No Badan" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#submit').click(function(){
$.ajax({
url:postURL,
method:"POST",
data:$('#add_name').serialize(),
type:'json',
success:function(data)
{
if(data.error){
printErrorMsg(data.error);
}else{
i=1;
$('.dynamic-added').remove();
$('#add_name')[0].reset();
$(".print-success-msg").find("ul").html('');
$(".print-success-msg").css('display','block');
$(".print-error-msg").css('display','none');
$(".print-success-msg").find("ul").append('<li>Record Inserted Successfully.</li>');
}
}
});
});
function printErrorMsg (msg) {
$(".print-error-msg").find("ul").html('');
$(".print-error-msg").css('display','block');
$(".print-success-msg").css('display','none');
$.each( msg, function( key, value ) {
$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
});
}
});
</script>
I tried this on change jquery but of course fail:
<script type="text/javascript">
jQuery(document).ready(function ()
{
$(document).on('change','#pegawai[]',function(){
var PegID = jQuery(this).val();
if(PegID)
{
jQuery.ajax({
url : 'add_demo/get_pegawai/'+PegID,
type : "GET",
dataType : "json",
success:function(data)
{
console.log(data);
$('input[name="nobadan[]"]').val(data.ext);
}
});
}
else
{
$('input[name="nobadan"]').empty();
}
});
});
</script>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire