Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
addrow pada form tidak berjalan
gambar no 1 = <a href='https://postimg.org/image/doevp5d97/'>https://postimg.org/image/doevp5d97/</a> 2 = <a href='https://postimg.org/image/suz64ood7/'>https://postimg.org/image/suz64ood7/</a>
saya punya sebuah form (gambar no 1) menggunakan tiga fungsi javascript 1. pemanggilan database 2. pemanggilan array 3. pembuatan add row ketika saya input combobox window position, maka akan muncul combobox position detail, ini sudah berjalan. ketika saya klik button "+" akan muncul baris baru yang sama (gambar no 2), permasalahannya ketika saya input combobox window position pada baris 2 dan seterusnya, combobox position detail tidak muncul seperti baris pertama (javascipt ke 3 memanggil javascript ke 2). jadi pertanyaan saya bagaimana caranya agar javascript ke 2 (pemanggilan array) dapat berfungsi ketika dia berada dalam javascript ke 3 (pembuatan addrow) ini contoh script nya
<table border="0" width="100%" id="tbl1">
<tr>
<td width="250">INVENTORY CATEGORY</td>
<td width="200">ITEM GROUP</td>
<td width="400">INVENTORY DESC</td>
<td width="200">WINDOW POSITION</td>
<td width="320">POSITION DETAIL</td>
<td width="100">QTY</td>
<td width="140"><input type="button" onClick="javascript:void(0);" id='anc_add' value="[+]"></td>
</tr>
<tr>
<td><select name="inventory_category[0]" class="form-control6">
<option value=''> </option>
<option value='WINDOW FILM'>WINDOW FILM </option>
</select></td>
<td><select name="item_group[0]" class="form-control6" >
<option value=''> </option>
<option value='V-KOOL'>V-KOOL </option>
</select></td>
<td><select name="inventory_serial[0]" class="form-control2" id="inventory">
<option value=''> </option>
<?php foreach($inventory as $inven){
echo '<option value="'.$inven->serial.'">'.$inven->inventory_name.'</option>';
} ?>
</select></td>
<td><select id="makes" name="window_position[0]" class="form-control6"> <!-- membuat combobox pertama, dengan id makes -->
<option value=''> </option>
<?php
//menampilkan data dari array yang sudah di buat diatas
foreach($makes as $m){ echo '<option value="'.$m.'">'.$m.'</option>'; }
?>
</select>
</td>
<td><select id="models" class="form-control2" name="window_position_detail[0]" style="display:none;"><!-- membuat combobox kedua dengan id models, dan display none agar tidak terlihat -->
</select>
</td>
<td><input type="text" name="serial_no[0]" class="form-control6" ></td>
<td><input type="button" onClick="javascript:void(0);" class="remCF" value="[-]"></td>
</tr>
</table>
<script>
$(document).ready(function(){
$("#car_brand").change(function (){
var url = "<?php echo site_url('admin/add_ajax_car_type');?>/"+$(this).val();
$('#car_type').load(url);
return false;
})
// $("#models").change(function (){
// var url = "<?php echo site_url('wilayah/add_ajax_inventory');?>/"+$(this).val();
// $('#inventory').load(url);
// return false;
// })
// $("#kecamatan").change(function (){
// var url = "<?php echo site_url('wilayah/add_ajax_des');?>/"+$(this).val();
// $('#desa').load(url);
// return false;
// })
});
</script>
<script>
$('#makes').change(function(){ //jika combobox pertama nilainya berubah maka menjalankan script di bawah
$('#models').css("display","block"); //menampilkan combobox kedua
$('#models').change(function(){ //jika combobox kedua nilainya berubah
$('#submit').css("display","block"); //menampilkan tombol submit
});
var make = $(this).val(); //menangkan nilai dari combobox pertama
$.post('<?php echo site_url('admin/soccreate1');?>', {make:make}, function(data){ // menjalankan ajax request dari file select-request.php dan mengirimkan variable make sebagai post variabel dengan nama make, dan mengembalikan info dengan variable data
$('#models').html(data); // menampilkan variabel data
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#anc_add").click(function(){
var makes = $("#makes").val();
var models = $("#models").val();
var markup = '<tr>'+
'<td><select name="inventory_category" class="form-control6"><option value=""> </option><option value="WINDOW FILM">WINDOW FILM </option></select></td>'+
'<td><select name="item_group" class="form-control6" ><option value=""> </option><option value="V-KOOL">V-KOOL </option></select></td>'+
'<td><select name="inventory_serial" class="form-control2" id="inventory"><option value=""> </option><?php foreach($inventory as $inven){echo "<option value=".$inven->serial.">".$inven->inventory_name."</option>";} ?></select></td>'+
'<td><select id="makes" name="window_position" class="form-control6"><option value=""> </option><?php foreach($makes as $m){ echo "<option value=".$m.">".$m."</option>"; }?></select></td>'+
'<td><select id="models" class="form-control2" name="window_position_detail" style="display:none;"></select></td>'+
'<td><input type="text" name="serial_no" class="form-control6" ></td>'+
'<td><input type="button" onClick="javascript:void(0);" class="remCF" value="[-]"></td>'+
'</tr>';
$("#tbl1").append(markup);
});
$("#tbl1").on('click','.remCF',function(){
$(this).parent().parent().remove();
});
});
</script>
maaf kalo panjang :D
4 Jawaban:
Rasanya kamu perlu tau hal ini dulu : Dalam sebuah halaman html / php, ID pada suatu element, hanya boleh dipakai sekali.. misal : "budi" --> id pelajar P001 "anjas" --> id pelajar P002
tidak boleh ada 2 pelajar menggunakan ID yang sama..
adalah lebih baik kalau, anda tau, akan ada element-element memiliki kesamaan, sebut saja dia dengan kelas nya..
-- dalam konteks kamu, terdapat kesalahan $('#makes').change(); --> penggunaan ID "makes" adalah berarti, anda hanya memerintahkan 1 item, untuk di perlakukan, "apabila on change" tersebut.. bukan untuk beberapa element.
-- solusi dari saya : ganti lah penggunaan $("#makes").change(); menjadi : $(".makes").change();
berarti element
<select id="makes" name="window_position[0]" class="form-control6">
menjadi
<select class="makes" name="window_position[0]" class="form-control6">
juga di baris
var markup = '<tr>'+
'<td><select name="inventory_category" class="form-control6"><option value=""> </option><option value="WINDOW FILM">WINDOW FILM </option></select></td>'+
'<td><select name="item_group" class="form-control6" ><option value=""> </option><option value="V-KOOL">V-KOOL </option></select></td>'+
'<td><select name="inventory_serial" class="form-control2" id="inventory"><option value=""> </option><?php foreach($inventory as $inven){echo "<option value=".$inven->serial.">".$inven->inventory_name."</option>";} ?></select></td>'+
'<td><select id="makes" name="window_position" class="form-control6"><option value=""> </option><?php foreach($makes as $m){ echo "<option value=".$m.">".$m."</option>"; }?></select></td>'+
'<td><select id="models" class="form-control2" name="window_position_detail" style="display:none;"></select></td>'+
'<td><input type="text" name="serial_no" class="form-control6" ></td>'+
'<td><input type="button" onClick="javascript:void(0);" class="remCF" value="[-]"></td>'+
'</tr>';
baris yang
<select id="makes"
menjadi
<select class="makes"
selain itu, perlu di ketahui juga.. penggunaan trigger on change seperti itu, TERKADANG (tidak selalu lho ya), hanya membaca element yang sudah ada saja..
jadi apabila element tersebut di tambahkan melalui trigger on click, kadang, yang
$(".makes").change();
tidak terbaca, dikarenakan, secara sequence html kan di baca oleh javascript.. waktu kamu bilang, $(".makes") --> dia akan mencari dan mengumpulkan semua element dengan class tersebut.. jadi apabila di tengah tengah running program, bertambah element dengan kelas tersebut, makaaa.. biasa nya tidak terbaca... (ini pengalaman sih)
solusi tambahan nya adalah : setiap kali ada penambahan baris, selain saya menambahkan element element tersebut.. saya akan mendefinisikan ulang
onChange(function(){ blablablabla });
sehingga harusnya seperti berikut fungsi kamu :
$("#anc_add").click(function(){
var makes = $("#makes").val();
var models = $("#models").val();
var markup = '<tr>'+
'<td><select name="inventory_category" class="form-control6"><option value=""> </option><option value="WINDOW FILM">WINDOW FILM </option></select></td>'+
'<td><select name="item_group" class="form-control6" ><option value=""> </option><option value="V-KOOL">V-KOOL </option></select></td>'+
'<td><select name="inventory_serial" class="form-control2" id="inventory"><option value=""> </option><?php foreach($inventory as $inven){echo "<option value=".$inven->serial.">".$inven->inventory_name."</option>";} ?></select></td>'+
'<td><select id="makes" name="window_position" class="form-control6"><option value=""> </option><?php foreach($makes as $m){ echo "<option value=".$m.">".$m."</option>"; }?></select></td>'+
'<td><select id="models" class="form-control2" name="window_position_detail" style="display:none;"></select></td>'+
'<td><input type="text" name="serial_no" class="form-control6" ></td>'+
'<td><input type="button" onClick="javascript:void(0);" class="remCF" value="[-]"></td>'+
'</tr>';
$("#tbl1").append(markup);
$('.makes').change(function(){ //jika combobox pertama nilainya berubah maka menjalankan script di bawah
$('#models').css("display","block"); //menampilkan combobox kedua
$('#models').change(function(){ //jika combobox kedua nilainya berubah
$('#submit').css("display","block"); //menampilkan tombol submit
});
var make = $(this).val(); //menangkan nilai dari combobox pertama
$.post('<?php echo site_url('admin/soccreate1');?>', {make:make}, function(data){ // menjalankan ajax request dari file select-request.php dan mengirimkan variable make sebagai post variabel dengan nama make, dan mengembalikan info dengan variable data
$('#models').html(data); // menampilkan variabel data
});
});
});
segitu saja dulu.. kalau masih bingung curhat lagi di mari dah.. semangat.. ada 1000 jalan menuju roma, cara saya mungkin bukan yang terbaik, hanya share pengalaman saya yang kebetulans sama.
sebelumnya terima kasih om udah kasih pengalamannya, semoga ilmunya bermanfaat dan selalu mendapat keberkahan. aamiin :)
saya sudah mengikuti tutorialnya. tapi, setiap saya menambah baris dan saya input baris yang kedua dan seterusnya malah yang berubah selalu yang baris awal / baris pertama yaa om?
contoh gambar https://postimg.org/image/d8lowjeqj/
tolong bantu lagi dong untuk pemanggilan javascriptnya kan ga bisa dua kali ya? berarti permasalahannya tinggal perulangan pada javascript tersebut, bisa tolong bantu untuk looping javascript pada function anc_add itu kaya gimana yaa?
<script type="text/javascript">
$("#anc_add").click(function(){
$(document).ready(function(){
var markup = '<tr>'+
'<td><select name="inventory_category" class="form-control6"><option value=""> </option><option value="WINDOW FILM">WINDOW FILM </option></select></td>'+
'<td><select name="item_group" class="form-control6" ><option value=""> </option><option value="V-KOOL">V-KOOL </option></select></td>'+
'<td><select name="inventory_serial" class="form-control2" id="inventory"><option value=""> </option><?php foreach($inventory as $inven){echo "<option value=".$inven->serial.">".$inven->inventory_name."</option>";} ?></select></td>'+
'<td><select id="makes1" name="window_position" class="form-control6"><option value=""> </option><?php foreach($makes as $m){ echo "<option value=".$m.">".$m."</option>"; }?></select></td>'+
'<td><select id="models1" class="form-control2" name="window_position_detail" style="display:none;"></select></td>'+
'<td><input type="text" name="serial_no" class="form-control6" ></td>'+
'<td><input type="button" onClick="javascript:void(0);" class="remCF" value="[-]"></td>'+
'</tr>';
$("#tbl1").append(markup);
$('#makes1').change(function(){ //jika combobox pertama nilainya berubah maka menjalankan script di bawah
$('#models1').css("display","block"); //menampilkan combobox kedua
$('#models1').change(function(){ //jika combobox kedua nilainya berubah
$('#submit').css("display","block"); //menampilkan tombol submit
});
var make = $(this).val(); //menangkan nilai dari combobox pertama
$.post('<?php echo site_url('admin/soccreate1');?>', {make:make}, function(data){ // menjalankan ajax request dari file select-request.php dan mengirimkan variable make sebagai post variabel dengan nama make, dan mengembalikan info dengan variable data
$('#models1').html(data); // menampilkan variabel data
});
});
});
$("#tbl1").on('click','.remCF',function(){
$(this).parent().parent().remove();
});
});
</script>
<div>Sama juga kak, aku mau nanya : salah satu page dari web ku ada yg berfungsi untuk mengaktifkan email pelanggan yang masuk. dengan tanda ceklis. <br>nah formnya seperti ini : <br><a href="javascript:void(0);" class="btn btn-xs btn-edit" data-id="<?php echo $row->subscribe_id;?>" title="Aktifkan Status Email"><span class="fa fa-check"></span></a></div><div> <?php else:?></div><div> <?php endif;?></div><div> <br>tetapi kasusnya adalah, itu hanya berfungsi pada halaman pertama daftar email. untuk halaman ke 2 dan seterusnya, tombol ceklisnya tidak berfungsi lagi. mohon dijawab ya... apa yg saya harus perbaiki. terima kasih..</div>
