My form input contains an array of values, from which I need to extract a value for use in Ajax and JavaScript code to populate the next form. However, my current code is not running as expected and no errors are being displayed.
<table>
<form>
<?php
for($i=1;$i<=$jml;$i++){?>
<tr>
<td>Jenis CI</td>
<td><select class="form-control" name="jenis2[]"id="jenis2[]" required>
<?php foreach($relasi as $row) { ?>
<option value="<?php echo $row->idJenisCI;?>"><?php echo $row->namaJenisCI;?>
</option><?php } ?>
</select>
</td>
</tr>
<tr>
<td>Nama CI</td>
<td><select class="id2 form-control" name="id2[]" required></select></td>
</tr>
<?php }?>
<tr align="center">
<td colspan="2"><input class="tombol" type="submit" name="submit" value="Simpan"></td>
</tr>
</form>
</table>
Here is my JavaScript and AJAX code:
<script type="text/javascript">
$(document).ready(function(){
$('#jenis2').change(function(){
var idJenisCI=$(this).val();
$.ajax({
url : "<?php echo base_url();?>index.php/C_ProyekAkhir/option",
method : "POST",
data : {idJenisCI: idJenisCI},
async : false,
dataType : 'json',
success: function(data){
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<option value="'+data[i].idCI+'-'+data[i].namaCI+'">'+data[i].namaCI+'</option>';
}
$('.id2').html(html);
}
});
});
});
</script>