It looks like you're new here. If you want to get involved, click one of these buttons!
<script>
$(function($) {
_.compile = function(templ) {
var compiled = this.template(templ);
compiled.render = function(ctx) {
return this(ctx);
}
return compiled;
}
$('.pegawai-typeahead').typeahead({
template:
'<p><strong><%= nama %></strong>',
name: 'namax',
valueKey: 'nama',
engine: _,
local: [
{
"nama":"Anton","nip":"19640709","golongan":"II/e","jabatan":"Dir 1"
}, { "nama":"Rita","nip":"19580503","golongan":"II/e","jabatan":"Dir 2"
}, { "nama":"Indra","nip":"19580517","golongan":"I1/e","jabatan":"Dir 3"
}
]
}).on('typeahead:selected', function(event, datum) {
$('#nip').val(datum.nip);
$('#jabatan').val(datum.jabatan);
$('#golongan').val(datum.golongan);
});
});
</script>
<div class="panel-body">
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="pegawai-typeahead" id="nama" name="nama[]" value="" placeholder="nama">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="nip" name="nip[]" value="" placeholder="nip">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="jabatan" name="jabatan[]" value="" placeholder="jabatan">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="golongan" name="golongan[]" value="" placeholder="golongan">
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="add_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<div id="add_fields">
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
var room = 1;
function add_fields() {
room++;
var objTo = document.getElementById('add_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group"><input type="text" class="pegawai-typeahead" id="nama" name="nama[]" value="" placeholder="nama"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="nip" name="nip[]" value="" placeholder="nip"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="jabatan" name="jabatan[]" value="" placeholder="jabatan"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <input type="text" class="form-control" id="golongan" name="golongan[]" value="" placeholder="golongan"><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_add_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_add_fields(rid) {
$('.removeclass'+rid).remove();
}
</script>
Comments
dipahami dulu cara kerja javascript nya yg berhubungan ama html.
contoh form + js kaya begini :
[A]
------------------------------------------------------------
<input type="button" value="tambah" onclick="tambah()">
<div id="container">
<input type="text" class="input"><br>
</div>
<script>
var ip=document.getElementsByClassName("input");
for(index in ip) alert("index="+index+" | element="+ip[index].tagName);
</script>
------------------------------------------------------------
coba elo jalankan, alert apa yg keluar ? perhatikan baik-baik.
hanya ada SATU input yg pake class "input", dengan TAG / element INPUT.
itu terbaca saat index = 0 ... index lainnya tidak menunjuk ke object element
[B]
------------------------------------------------------------
<input type="button" value="tambah" onclick="tambah()">
<div id="container">
<input type="text" class="input"><br>
<input type="text" class="input"><br>
</div>
<script>
var ip=document.getElementsByClassName("input");
for(index in ip) alert("index="+index+" | element="+ip[index].tagName);
</script>
------------------------------------------------------------
coba elo jalankan, alert apa yg keluar ? perhatikan baik-baik.
hanya ada DUA input yg pake class "input", dengan TAG / element INPUT.
itu terbaca saat index = 0 dan 1 ... index lainnya tidak menunjuk ke object element
JADI ...
kalo elo mau melekatkan "SESUATU" yg diambil pake method "Elements" (pake S, multi / banyak, karena ada getElementById yg tanpa S, karena HANYA bisa ambil 1 element, itu mengapa ID element tidak boleh kembar), hanya elo proses saat index adalah angka.
[C]
------------------------------------------------------------
<input type="button" value="tambah" onclick="tambah()">
<div id="container">
<input type="text" class="input" value="123"><br>
<input type="text" class="input" value="456"><br>
</div>
<script>
var ip=document.getElementsByClassName("input");
for(index in ip) if(!isNaN(index)) { ip[index].onclick=function() {alert(this.value);}; }
</script>
------------------------------------------------------------
coba jalankan, lalu clik pada salah satu input text yg ada.
!isNaN(...) ... hanya mem-proses yg index nya angka.
.onclick=function() ... melekatkan fungsi ke event onclick di element yg dimau
karena saat awal yg terbaca hanya ada index 0 & 1 ...
ya event onclick nya cuma nempel di 2 element itu.
sampai sini masih paham yah ?
------------------------------------------------------------
<input type="button" value="tambah" onclick="tambah()">
<div id="container">
<input type="text" class="input" value="123"><br>
<input type="text" class="input" value="456"><br>
</div>
<script>
function tambah() {
var container=document.getElementById("container");
var container_html=container.innerHTML;
container_html=container_html+'<input type="text" class="input" value="abc"><br>'+"\n";
container.innerHTML=container_html;
}
var ip=document.getElementsByClassName("input");
for(index in ip) if(!isNaN(index)) { ip[index].onclick=function() {alert(this.value);}; }
</script>
------------------------------------------------------------
sekarang ada fungsi tambah().
coba elo jalankan.
klik input text 2 yg awal ... bisa ? event onclick nya jalan ?
lalu klik button tambah ...
ada input text baru ?
coba elo klik ke SEMUA input text yg sekarang ada ... bisa ? event onclick nya jalan ?
[E]
------------------------------------------------------------
<input type="button" value="tambah" onclick="tambah()">
<div id="container">
<input type="text" class="input" value="123"><br>
<input type="text" class="input" value="456"><br>
</div>
<script>
function tambah() {
var container=document.getElementById("container");
var input_text=document.createElement("INPUT");
input_text.setAttribute("type", "text");
input_text.setAttribute("class", "input");
input_text.value="abc";
container.appendChild(input_text);
container.appendChild(document.createElement("BR"));
}
var ip=document.getElementsByClassName("input");
for(index in ip) if(!isNaN(index)) { ip[index].onclick=function() {alert(this.value);}; }
</script>
------------------------------------------------------------
fungsi tambah() tetep ada, tapi bukan pake .innerHTML.
pakenya createElement().
coba elo jalankan.
klik input text 2 yg awal ... bisa ? event onclick nya jalan ?
lalu klik button tambah ...
ada input text baru ?
coba elo klik ke SEMUA input text yg sekarang ada ... bisa ? event onclick nya jalan ?
apa beda hasil dari [D] dan [E] ?
bisa elo logika kenapa beda ?
apa sebabnya ?
------------------------------------------------------------
<input type="button" value="tambah" onclick="tambah()">
<div id="container">
<input type="text" class="input" value="123"><br>
<input type="text" class="input" value="456"><br>
</div>
<script>
function tambah() {
var container=document.getElementById("container");
var input_text=document.createElement("INPUT");
input_text.setAttribute("type", "text");
input_text.setAttribute("class", "input");
input_text.value="abc";
input_text.onclick=function() {alert(this.value);};
container.appendChild(input_text);
container.appendChild(document.createElement("BR"));
}
var ip=document.getElementsByClassName("input");
for(index in ip) if(!isNaN(index)) { ip[index].onclick=function() {alert(this.value);}; }
</script>
------------------------------------------------------------
fungsi tambah() tetep ada, tapi bukan pake .innerHTML.
pakenya createElement().
di dalamnya juga ada definisi event onclick buat element yg baru.
coba elo jalankan.
klik input text 2 yg awal ... bisa ? event onclick nya jalan ?
lalu klik button tambah ...
ada input text baru ?
coba elo klik ke SEMUA input text yg sekarang ada ... bisa ? event onclick nya jalan ?
kira-kira bisa menyimpulkan kenapa koding elo bermasalah ?
[G]
------------------------------------------------------------
<input type="button" value="tambah" onclick="tambah()">
<div id="container">
<input type="text" class="input" value="123" onclick="alert(this.value);"><br>
<input type="text" class="input" value="456" onclick="alert(this.value);"><br>
</div>
<script>
function tambah() {
var container=document.getElementById("container");
var container_html=container.innerHTML;
container_html=container_html+'<input type="text" class="input" value="abc" onclick="alert(this.value);"><br>'+"\n";
container.innerHTML=container_html;
}
</script>
------------------------------------------------------------
kembali pake innerHTML.
tapi dgn definisi onclik yg sudah dari awal di definisikan di element nya.
bukan dilekatkan setelah element ada.
saat tambah element baru, onclick juga di definisikan langsung di string tambahan element nya.
coba elo jalankan.
klik input text 2 yg awal ... bisa ? event onclick nya jalan ?
lalu klik button tambah ...
ada input text baru ?
coba elo klik ke SEMUA input text yg sekarang ada ... bisa ? event onclick nya jalan ?
bisa menyimpulkan kenapa kalo model kaya begini pake innerHTML juga bisa jalan ?
tapi sering bikin salah logika.
[D] ...
karena .innerHTML itu hanya baca "STRING" dari isi element.
semua event ditinggal / tidak dibaca
jadinya, saat dikembalikan ke .innerHTML, ya yg "nempel" cuma "STRING"
semua event hilang.
mau pake model
element.innerHTML+= "... element baru ...";
ndak ngaruh, sama saja.
[E] ...
langkahnya sudah setengah bener ... tapiiiii ...
pelekatan event onclick HANYA ADA DI AWAL, saat halaman dibuka.
otomatis hanya akan dilekatkan ke element yg index 0 & 1.
kalo ada element baru, otomatis ya ndak ada proses pelekatan event onclick di element yg baru.
kalo ada element baru, ya harus melekatkan sendiri / lagi event onclick di element itu
[F] ...
sudah bener ...
event onclick dilekatkan ke element yg baru.
[G] ...
kalo ini, tidak ada proses pelekatan event onclik setelah element ada.
memang dari awal onclik nya ditulis gabung dengan string element.
jadi saat dibaca pake innerHTML, ya definisi oncliknya juga ada, sebagai "STRING".
tapi saat tambah element baru, onclick baru tetep harus ditulis juga.
elo definisi element baru pake innerHTML.
[1] pelekatan event hanya ada di awal, di element yg baru tidak ada (baca [E])
[2] elo nulis element baru pake innerHTML, ya mau ndak mau elo pake cara [G], tulis event langsung di string html element baru nya.
iya aq pke cara G, untuk event onclick memang lancar2 saja,
namun typeahead tidak berjalan untuk form tambah selanjutnya
event apa to yg elo pake ?
coba baca koding elo sendiri baik-baik.
sama saja.
iya, bukan onclick.
.on('typeahead:selected', function(event, datum)
itu kan ?
itu event apa ?
on... ?
html cuma punya event ini :
https://www.w3schools.com/jsref/dom_obj_event.asp
kalo liat modelnya event yg cocok itu onkeyup.
tapi mendingan elo buatkan fungsi baru utk pencariannya.
model awal elo juga elo ubah pake fungsi yg sama.
data juga elo keluarkan dari definisi fungsi awal elo, biar bisa dipake bersama.
jadi kira-kira begini :
var data=[
...
];
function searchdata(...) {
...
}
// definisi fungsi awal elo di sesuaikan pake data dan fungsi pencarian yg sama
lalu di innerHTML elo :
... <input type="text" class="pegawai-typeahead" id="nama" name="nama[]" value="" placeholder="nama" onkeyup="searchdata(...)"> ...
definisi ini di koding awal elo ...
$('#nip').val(datum.nip);
$('#jabatan').val(datum.jabatan);
$('#golongan').val(datum.golongan);
mestinya bermasalah.
itu mengganti semua element yg ber-ID tsb.
tapi ID elo kembar semua.
yg terambil / terupdate pasti hanya yg PERTAMA.
elo belum liat salahnya karena kebetulan script tambah elo ndak jalan.