lazycatnct
New Member
I have created a table that contains a dynamic form, so when clicked add button will display a new row with the same form each line. and I have also made ??the switch to clear the form, but it is not going well. anything because there are other functions in the action to remove that line. The following coding that I have made.html:\[code\]<table class="table table-striped area-table tabel-form-makanan"> <thead> <tr> <th>Nama Makanan</th> <th>Jenis Makanan</th> <th>Harga Makanan</th> </tr> </thead> <tbody> <tr> <td> <input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/> <input type="hidden" name="id-makanan[]" class="id-makanan"/> </td> <td> <input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/> </td> <td> <input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/> </td> <td> <a class="btn hapus-baris-makanan" style="display: none;"><i class="icon-remove"></i></a> </td> </tr> </tbody></table><button class="btn btn-primary tombol-tambah-makanan" type="button" style="float: right; margin-right: 10px;">Tambah</button>\[/code\]javascript for dynamic form:\[code\]$('.tombol-tambah-makanan').on('click', function(){ var tr = '<tr>\n\ <td><input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/><input type="hidden" name="id-makanan[]" class="id-makanan"/></td>\n\ <td><input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/></td>\n\ <td><input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/></td>\n\ <td><a class="btn hapus-baris-makanan"><i class="icon-remove"></i></a></td>\n\ </tr>'; $("table.tabel-form-makanan tbody").append(tr); });\[/code\]javascript for delete form:\[code\]$('.tabel-form-makanan').on( 'click', '.hapus-baris-makanan', function(){ var parent = $(this).parents('tr'); var harga = $('.harga-makanan', parent).val(); pengurangan_pesanan(harga); $(this).closest('tr').remove();});\[/code\]other javascript:\[code\]function pengurangan_pesanan(price) { if (subtotal > 0) { var kembali = 0; subtotal -= parseFloat(price); $('.subtotal').val(subtotal); if (cek_bayar != isNaN || cek_bayar != 0) { kembali = cek_bayar - subtotal; $('.kembali').val(kembali); } }}\[/code\]Do you have a solution to this problem, I really need it. thank you