Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Jika combobox dipilih, 3 text otomatis muncul pakai jquery/jascript

Siang master,
Jadi saya ada form, jika pilih comboboxnya (Berdasarkan database karyawan), maka 3 text di bawahnya langsung ke isi otomatis berdasarkan nilai dari database karyawan (Sesuai id karyawan). Kebetulan sy pake CI di sini. Untuk penerapannya bisa pake jquery atau javascript.

Ada yang bisa tolongin ga ?

View

<?php 
<form action="<?php echo base_url();?>karyawan/data_karyawan_inactive/save" class="form-horizontal" role="form" method="post">
<label class="col-lg-2 control-label">Nama Karyawan</label>
<select name="id_karyawan" class="form-control">
<option value="">-- Select Karyawan --</option>
<?php foreach($select_karyawan as $pr){?>
<option value="<?php echo $pr->id_karyawan;?>"><?php echo $pr->nama_lengkap;?></option>
<?php } ?>
</select>
 
<label class="col-lg-2 control-label">NIK</label>
<input class="form-control" name="nik" readonly="">
<label class="col-lg-2 control-label">Departemen</label>
<input class="form-control" name="" readonly="">
<label class="col-lg-2 control-label">Jabatan</label>
<input class="form-control" type="text" name="jabatan" readonly="">
 
<button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Save</button>
?>


controller

<?php 
public function index(){
 
$data = array('title'=>'List Data Karyawan Inactive');
$this->_render('data_karyawan_inactive',$data);
 
}
 
private function _render($view,$data = array()){
 
$this->load->view('header',$data);
$this->load->view('sidebar');
$this->load->view($view,$data);
$this->load->view('footer');
}
 
private function _select_karyawan(){
$sql ="SELECT a.*,
b.nama_dept,e.nama_golongan,f.jabatan
FROM karyawan a
LEFT JOIN dept b ON a.id_dept = b.id
LEFT JOIN golongan e ON a.id_golongan = e.id
LEFT JOIN jabatan_user f ON a.id_jabatan = f.id
ORDER BY nama_lengkap";
 
return $this->db->query($sql)->result();
}
 
public function add(){
$data = array(
'title'=>'Add Karyawan Inactive',
'select_karyawan'=> $this->_select_karyawan(),
);
 
$this->_render('add_karyawan_inactive',$data);
}
Tagged:

Comments

  • kondisi sekarang untuk combobox nya uda bisa ambil data dari database, tinggal text ptpmatisnya aja master yang belum bisa.
  • ???

    saat pilih isi combo
    event yg mana yg di jalankan ?

    btw, ginilah repotnya framework
    kalo ngeliat masalah, mesti ngeliat di banyak tempat
    elo nanya combo yg interaktif
    iya, combonya di posting, ada di view
    tapi javascript nya mana ?

    soalnya dari js tadi, bakal tau controller mana yg bakal jalan
  • jadi gini mas, jadi di fuction _select_karyawan untuk query karyawan, nah dari hasil itu di kirim pake function add buat ke viewnya.
    Pas di view, di panggillah fungtion _select_karyawan tadi di select nya.
    DI select uda keluar daftar karyawan, tinggal jquerynya aja gimana mas biar otomatis text field nya ke isi.
  • edited June 2016
    paham maksud gw ?

    merunut alur itu mesti urut berdasar aktivitas

    pertama elo bilang : pilih combo
    ok, ndak masalah, combo nya ada di view, gw bisa liat

    tapi setelah combo dipilih, yg jalan yg mana ?
    mungkin elo paham
    tapi yg baca kagak
    soalnya yg baca pasti ngeliat koding elo
    dan koding elo emang ada yg ndak diposting

    elo deskripsikan juga ndak bakal menjelaskan apa pun

    programmer itu baca dari koding
    bukan cerita
  • edited June 2016
    gini ajalah gw kasih contoh kecil karena elo juga programmer

    gw punya form
    <form>
      <select onchange="switchinput(this.value)">
        <option value="1" selected>1</option>
        <option value="2">2</option>
      </select><br>
      <input type="text" id="inputtext" value="1">
    </form>

    tanpa gw posting javascript fungsi switchinput() ...
    lalu gw nanya ke elo ... "kok isi input text ndak mau ganti ya ?"

    bisa elo jawab, tanpa nanya ... "mana javascript nya ?"

    bisa dimengerti gambarannya ?

    seandai gw cerita, mendeskripsikan proses nya ...
    "jadi gini lho mas, itu combo dipilih,
    lalu seharusnya di input text di bawahnya otomatis terisi value sesuai pilihan combonya
    tapi itu ndak mau muncul"

    apakah deskripsi itu akan menolong ?
  • ia maap mas klo sy agak kurang paham maksudnya mas td, jadi kondisi sekarang sy belum punya javasript buat munculin di text nya setelah combo di pilih. jadi sy minta panduan mas buat bisa nampilin data di text nya. mungkin bisa ksh petunjuk sedikit ke sy.
    Klo contoh form yg mas yg mas td, menurut sy emang harus pake javascript buat munculin text karena mungkin ga bisa otomatis muncul klo ga ada fungsi buat manggil datanya.
  • edited June 2016
    ntar kok gw jadi bingung ...

    "sy belum punya javasript buat munculin di text nya setelah combo di pilih"

    itu ada 2 hal ...
    - munculin di text nya
    - setelah combo di pilih <~~ gw baru nanya javascript ini nya lho mas

    gw mau tau itu, soalnya berhubungan dgn ini :
    "kondisi sekarang untuk combobox nya uda bisa ambil data dari database"

    gw mau memastikan jalannya aplikasi elo itu kaya apa alurnya
    dari browser dikirim ke mana, dgn cara bagaimana, di handle controller yg mana, prosesnya bagaimana, outputnya apa, lalu output itu mesti dibagaimanakan

    yg merah itu kagak ada informasinya

    gw jadi bingung, controller yg jalan yg mana

    paham ?
  • edited June 2016
    Saya runut dari awal ya mas beserta prosesnya.

    Saya punya form "Add Karyawan Inactive" yang fungsinya untuk merubah status karyawan yang sudah resign/keluar.

    Ini gambar form inputnya (Gambar 1)
    image
    Ini gambar yang ingin saya mau (Gambar 2)
    image
    Di form tersebut ada combo untuk memilih nama karyawan yang resign, text nik, text departemen dan text jabatan. Yang hanya bisa di pilih hanya combo (Gambar 1). Untuk Text nya akan terisi otomatis berdasarkan nama karyawan yang di pilih dan datanya dari DB (Gambar 2).
    Untuk prosesnya sendiri :
    1. View (add_karyawan_inactive)
    <?php 
    <form action="<?php echo base_url();?>karyawan/data_karyawan_inactive/save" class="form-horizontal" role="form" method="post">
    <label class="col-lg-2 control-label">Nama Karyawan</label>
    <select name="id_karyawan" class="form-control">
    <option value="">-- Select Karyawan --</option>
    <?php foreach($select_karyawan as $pr){?>
    <option value="<?php echo $pr->id_karyawan;?>"><?php echo $pr-->nama_lengkap;?></option>
    <?php } ?>
    </select>
     
    <label>NIK</label>
    <input name="nik" readonly="">
    <label>Departemen</label>
    <input name="nama_dept" readonly="">
    <label>Jabatan</label>
    <input name="jabatan" readonly="">
     
    <button type="submit"> Save</button>
    ?>


    2. Controller (data_karyawan_inactive)
    <?php 
    public function index(){
    $data = array('title'=>'List Data Karyawan Inactive');
    $this->_render('data_karyawan_inactive',$data);
    }
     
    private function _render($view,$data = array()){
    $this->load->view('header',$data);
    $this->load->view('sidebar');
    $this->load->view($view,$data);
    $this->load->view('footer');
    }
     
    private function _select_karyawan(){
    $sql ="SELECT a.*,
    b.nama_dept,f.jabatan
    FROM karyawan a
    LEFT JOIN dept b ON a.id_dept = b.id
    LEFT JOIN jabatan_user f ON a.id_jabatan = f.id
    ORDER BY nama_lengkap";
     
    return $this->db->query($sql)->result();
    }
     
    public function add(){
    $data = array(
    'title'=>'Add Karyawan Inactive',
    'select_karyawan'=> $this->_select_karyawan(),
    );
    $this->_render('add_karyawan_inactive',$data);
    }


    Prosesnya,view di ambil dari "function add" yang ada di controller. Yang dikirm oleh
    function itu ada "function _select_karyawan" (untuk proses query data karyawan dari db) di dalam controller juga.
    Untuk combo di view,
    <?php foreach($select_karyawan as $pr){?>
    <option value="<?php echo $pr->id_karyawan;?>"><?php echo $pr->nama_lengkap;?></option>
    <php } ?>


    berfungsi untuk mengambil data karyawan dari "function _select_karyawan" di controller.
    Untuk data karyawan sudah muncul di combo. Pertanyaan saya :
    Bagaimana caranya supaya setelah user memilih nama karyawan di combo, text NIK, departemen dan jabatan di bawahnya bisa muncul otomatis (Seperti gambar 2)?
    Saya belum punya javascript untuk mengisi value otomatis di text itu mas.
    Maap kalo penjelasannya agak muter-muter.
  • owalaaahhhhhhhh ...

    elo event select nya pun belum dibikin ?
    yg gw tandai merah itu pun belum bikin ?

    itu view, sebelum <form>
    elo tambah aja <script> utk definisi event yg bakal melekat di select

    $("#id_karyawan").change(...)

    jalankan buat memanggil controller ambil data karyawan yg dipilih lewat ajax

    sudah, bikin itu dulu
  • ia mas belum, makanya saya bingung dan tanya ke mas caranya gimana.
    Maksudnya mas begini ?
    $("#id_karyawan").change($select_karyawan);
  • ya bukan to mas ...

    itu isinya request lewat ajax
    ada proses di dalamnya
    biasanya pake GET cukup
    dan yg dipanggil nantinya juga lewat controller tertentu

    masa belum pernah bikin request ajax pake jquery ?

    http://www.w3schools.com/jquery/jquery_ajax_get_post.asp

    itu ada yg lewat GET, tapi event nya .click()

    coba elo pikirkan yg bisa elo pake
  • edited June 2016
    Begini mas ?

    <script> 
    $( "#id_karyawan" ).change(function() {
    $.ajax({
    type:'GET',
    url:'<?php echo base_url("cuti/sisa_cuti/_select_karyawan"); ?>',
    data:{'id_karyawan':id_karyawan},
    success:function(data){
    $('#hasil').html(data);
    }
    });
    });
    </script>
  • bukan _select_karyawan to mas ...

    ini beda lagi

    elo bikin controller yg ambil data karyawan sesuai id yg dikirim
    pasti query nya pake WHERE

    _select_karyawan kan ambil semua, tanpa WHERE
  • saya uda tambahin dikit mas, maap klo masih salah.
    Saya tambahin function di controller


    <?php
    private function _select_karyawan_ajax($id_karyawan){
    $sql ="SELECT a.*,
    b.nama_dept,f.jabatan
    FROM karyawan a
    LEFT JOIN dept b ON a.id_dept = b.id
    LEFT JOIN jabatan_user f ON a.id_jabatan = f.id
    WHERE a.id_karyawan = {$id_karyawan} ";
    return $this->db->query($sql)->result();
    }
    ?>

    Saya ubah ajaxnya

    $(document).ready(function() {
    $( "#id_karyawan" ).change(function() {
    var id_karyawan = $("#id_karyawan").val();
    $.ajax({
    type:'GET',
    url:'<?php echo base_url("cuti/sisa_cuti/_select_karyawan_ajax"); ?>',
    data:{'id_karyawan':id_karyawan},
    success:function(data){
    $('#hasil').html(data);
    }
    });
    });
    });

  • dan ? sudah bisa jalan ?
  • Belum mas, itu baru ajax nya aja, belum penerapannya di text nya. Mungkin di combonya ada yang harus di rubah juga mas ?
  • ini :
    $('#hasil').html(data);

    sementara elo ganti pake :
    alert(data);

    di popup yg nungul, isi nya bener data yg dimau atau tidak ?
  • Maap mas, ga ada pop up yang keluar.

  • coba di atas ini :
    var id_karyawan = $("#id_karyawan").val();

    tambah :
    alert("OK");

    saat ganti isi / pilih combo, muncul alert "OK" atau tidak ?
  • ia mas muncul pop up "OK" nya.
  • edited June 2016
    return $this->db->query($sql)->result();
    bukan return mas'e ...

    ini mau pake json atau xml ?

    ini $this->db->query($sql)->result()
    mesti di CETAK sebagai json atau xml
    bukan di return
  • edited June 2016
    pake json aja mungkin ya mas meskipun ga ada pengalaman pake json  :D
    Saya rubah di controllernya jadi 
    <script>
    $karyawan = array();
    while($row = $sql)
    {
    $karyawan[] = $row;
    }
    echo json_encode($karyawan);
    </script>
    Bener ga mas ?
  • emang ndak bisa langsung gini yah :
    echo json_encode($this->db->query($sql)->result());

    buat ganti
    return $this->db->query($sql)->result();

    ndak pernah pake ci
    elo coba aja sendiri
  • Saya uda coba dan ga bisa mas.


    <?php
    public function _select_karyawan_ajax($id_karyawan){
    $sql ="SELECT a.*,
    b.nama_dept,f.jabatan
    FROM karyawan a
    LEFT JOIN dept b ON a.id_dept = b.id
    LEFT JOIN jabatan_user f ON a.id_jabatan = f.id
    WHERE a.id_karyawan = {$id_karyawan} ORDER BY nama_lengkap
    ";
    echo json_encode($this->db->query($sql)->result());
    ?>
  • "ga bisa" ini cara nyobanya gimana ?

    id karyawan yg ada contohnya berapa ?

    sudah nyoba akses langsung ke controller nya lewat address bar browser ?
    cuti/sisa_cuti/_select_karyawan_ajax/xxx

    xxx itu diganti id karyawan yg valid

    ada hasilnya ?
    kalo error, apa error nya ?
  • edited June 2016
    sory mas saya ada perubahan code di viewnya
    <script>
    $(document).ready(function() {
    $('#id_karyawan').change(function(){
    var id_karyawan = $("#id_karyawan").val();
    $.ajax({
    type: "GET",
    dataType:'json',
    url: base_url+'karyawan/data_karyawan_inactive/_select_karyawan_ajax',
    data:{'id_karyawan':id_karyawan},
    success: function(data){
    alert(data);
    },
    error: function(){alert('error');}
    });
    });
    });
    </script>

    Kalau saya akses langsung browser controllernya

    404 Page Not Found

    The page you requested was not found.


    Sampel karyawan ada 7 dengan id urut semua (1,2,3,4,5,6,7).
    Kalau saya pilih combonya, cuma tulisan 'Eror' doang yg keluar, berati ga ngambil ke controllernya ya mas.

  • edited June 2016
    controller itu tetep bisa langsung di akses dari browser

    kalo sampai 404, berarti url nya salah
    ya path url elo itu kaya apa ?

    coba aja akses
    [...]/karyawan/data_karyawan_inactive/_select_karyawan_ajax/2

    [...] itu mesti elo ubah supaya bener url nya
    tapi yg pasti, controller itu pasti bisa diakses dari browser dan dilihat hasilnya, apalagi cuma model GET
    POST aja bisa, tapi emang rada repot
  • ok mas saya ada rubah lagi di nama function di controllernya jadi select_karyawan_ajax dan hasilnya
    image
    Controllernya uda nampil, saya coba pilih combonya lagi & nama controllernya saya rubah tetep yg muncul tilisan "Error" ya mas. Masih ada yang salah di viewnya mas.
  • itu kesimpulannya :
    - controller sudah bener
    - data sudah ada, dan siap

    iya, yg salah view elo

    itu, di bawah :
    var id_karyawan = $("#id_karyawan").val();

    coba tambah :
    alert(base_url+'karyawan/data_karyawan_inactive/_select_karyawan_ajax');

    url nya sudah bener sesuai url controller yg elo bikin atau tidak ?
  • karena semula elo niatkan id_karyawan dikirim lewat parameter

    url: base_url+'karyawan/data_karyawan_inactive/_select_karyawan_ajax',
    data:{'id_karyawan':id_karyawan},

    mending jadikan 1 saja,
    ndak usah pake parameter

    url: base_url+'karyawan/data_karyawan_inactive/_select_karyawan_ajax/'+id_karyawan,

    beres dah
  • kalau url dan data di gabung jadi 1,

    success: function(data){
            alert(data);

    itu function(data) di ganti apa ya mas ? 
    :D
  • biarin gitu dulu ...
    dipastikan dulu data yg diterima bener atau ndak

    yg kecetak di popup nya apa ?
  • edited June 2016
    yang muncul
    karena saya emang pilih nama karyawan dengan id 1, kalau saya pilih nama karyawan nomor id 2 yang keluar
  • hasil alert(data) keluarnya itu ?

    kagak salah tuh ?

    yg alert() satunya
    alert(base_url+'karyawan/data_karyawan_inactive/_select_karyawan_ajax');
    dihapus saja
  • Saya pakai ini mas
    <script>
    $(document).ready(function() {
    $('#id_karyawan').change(function(){
    var id_karyawan = $("#id_karyawan").val();
    $.ajax({
    type: 'GET',
    dataType:'json',
    url: base_url+'karyawan/data_karyawan_inactive/select_karyawan_ajax/'+id_karyawan,
    success: function(data){
    alert(data);
    },
    error: function(){alert('error');}
    });
    });
    }); </script>
    Hasilnya
    image
  • ok, sudah bener, yg diterima data emang object nya json

    bisa elo akses value nya lewat, misal :
    data.nama_lengkap

    coba aja : alert(data);
    diganti : alert(data.nama_lengkap);

    tinggal elo tampilkan di
    <input name="nik" readonly="">
    <input name="nama_dept" readonly="">
    <input name="jabatan" readonly="">

    mending input nya diberi id, biar gampang nge-set value nya
  • edited June 2016
    kalau alert(data); saya ganti jadi alert(data.nama_lengkap); hasilnya :

    undefined mas
    image

    :D saya coba ganti dengan nik, jabatan dan id_karyawan juga undefined mas.

    di formnya jadi gini aja mas ?
    <input name="nik" id="nik" readonly="">
    <input name="nik" id="nama_dept" readonly="">
    <input name="nik" id="jabatan" readonly="">
  • coba elo ganti :
    alert(data);

    jadi :
    console.log(data);

    lihat output-nya di console nya browser

    kalo lihat ini :
    image
    itu bener elemen nya : id_karyawan, nik, nama_lengkap, nama_dept, jabatan
    dan tipe nya object

    kecuali data itu array of object, jadi mesti ditulis : data[0].nama_lengkap

    jadi, periksa dulu, output-kan ke console
  • di console hasilnya gini mas
    image
    Saya belum pernah pake console, maksud dari ini apa ya mas ?
  • edited June 2016
    iya, itu array of object
    pake data[0].nama_lengkap

    btw,

    <input name="nik" id="nik" readonly="">
    <input name="nik" id="nama_dept" readonly="">
    <input name="nik" id="jabatan" readonly="">

    itu kenapa "name"-nya sama semua ?
  • oalah..
    Maap salah mas, maklum copy paste 
    :D
     
    yg bener ini formnya 
    <input name="nik" id="nik" readonly="">
    <input name="nama_dept" id="nama_dept" readonly="">
    <input name="jabatan" id="jabatan" readonly="">

    Ok mas uda fix masalahnya. Makasih ya mas kepiting 
    ^:)^ =D>
  • Maap mas 1 lagi, kan saya uda pilih combonya yaa, data uda tampil mas,
    terus saya pilih -- Select karyawan -- yang valuenya = '' '', kok muncul pop up "Error" ya mas ?
    Cara supaya klo pilih -- Select karyawan --  terus text nik nya jadi ilang semua kaya awal lagi gimana ya mas ?
  • pake if di javascript nya to mas

    kalo value select kosong ndak usah jalankan request via ajax
    langsung kosongkan value input

    atau, itu alert error elo ubah buat megosongkan isian
    ndak perlu alert
  • ok uda mas, saya pake 

    error: function(){
    $('#nik').val("");
    $('#nama_dept').val("");
    $('#jabatan').val("");
    }

    Makasih infonya mas,.
Sign In or Register to comment.