Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Klik link berikut untuk informasi 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

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Jquery PHP Pada Input

Mastah, numpang bertanya,

Adakah yang punya tutorial buat event next n previous pake jquery pada inputan...

Jadi misal, di inputbox(php) kita klik next/previous di keyboard value nya berubah ke data selanjutnya/sebelumnya sesuai database, tapi via keyboard, tanpa ada tombol/button next dan previous..

Terima Kasih Sebelumnya mastah2...

Comments

  • edited April 5
    ya di trap keyboard to mas ...

    jquery kan punya .keydown()
    tempelkan saja di <body>

    ditempel di element juga boleh, asal saat buka halaman elo set focus ke element itu
  • saya gak paham jquery soalnya mastah labalaba.. bisa minta contoh penggunaannya ?
    atau tempel link tutorialnya aj disini biar mastah labalaba gak repot2..
  • jquery ya buka dokumentasi jquery to mas ...

    https://api.jquery.com/keydown/
  • oke mastah labalaba.. makasih pencerahannya.. dicoba dulu langsung...
  • edited April 5
    nih gw iseng ...

    simpan aja jadi file html, terserah namanya apa
    coba langsung buka pake browser

    event keydown nya gw lekatkan ke document
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    var idx=0;
    var arr = ['- tekan esc / panah atas-kiri-bawah-kanan keyboard -','ali','budi','amir','toni','wati','iwan','mimi','jono','ida'];

    $(document).keydown(function(event) {

    switch(event.keyCode) {
    case 37: // panah kiri
    case 38:idx-=idx>1?1:0;idx=idx<1?1:idx;break; // panah atas
    case 39: // panah kanan
    case 40:idx+=idx<arr.length-1?1:0;break; // panah bawah
    case 27:idx=0;break; // esc

    default:alert("keyCode tombol yg ditekan : "+event.keyCode);break;
    }

    $("#test").val(arr[idx]);
    });
    </script>
    <input type=text id="test" value="- tekan esc / panah atas-kiri-bawah-kanan keyboard -" disabled style="width:350px;text-align:center;">

    hati-hati nge-trap keyboard
    lekatkan di halaman yg membutuhkan saja
    soalnya bisa mengganggu behaviour navigasi browser
    tombol panah kiri-kanan-atas-bawah kan dipake buat scrolling browser
  • Waah siaap... makasi om labalaba... implementasinya lebih jelas klo ada contoh bgni.. hhehe..
  • satu lagi om, berarti kalo mau ambil data dari database, variabel arr nya buat data array yang dari database yaa, atau ditambah source url gitu yaa om ke form source array databasenya..
  • lha elo kalo bikin pake button atau link next / prev kaya apa ?
    ya itu yg elo pindah jadi isi tombol kiri kanan nya

    gw kan pake arr buat contoh gampang bikin javascript ganti-ganti isi field
    bukan harus kaya gitu yg elo pake
  • iyaa om, emang yg kaya gitu yg saya pake, bukan yang pake button.. udh bener koo, ini udh saya cobain.. sesuai harapan..

    maksud saya itu, data ali budi amir dll nya itu ngambil dari database, misal di difield namapegawai, naah saya gak paham nge while data itu di dalem jquerynya om labalaba buat gantiin data ali budi amir yang masih manual..
  • edited April 5
    elo mau bikin apa sih ?

    maksud elo tombol kiri kanan nya bukan buat paging ? <~~ asumsi gw elo mau bikin ini

    hanya buat ganti isi field / form dgn isi array / array of object yg sudah elo load sebelum nya ?

    kalo buat paging,
    biarpun ndak ada tombol next / prev nya
    fungsi yg seharusnya ada buat next / prev itu tetep ada,
    tapi jadi dilekatkan ke tombol keyboard kiri / kanan

    tapi kalo niat elo cuma mau buat menampilkan isi array / array of object yg sudah elo load sebelumnya
    ya kira-kira alurnya memang kaya contoh yg gw tunjukin
  • edited April 5
    bukan buat paging om... udah bener koo kaya yg om buat ituu.. udah sesuai mau saya..

    cuma isi datanya aja om,

    maksud saya yang ini..
     var arr = ['- tekan esc / panah atas-kiri-bawah-kanan keyboard - ','ali','budi','amir','toni','wati','iwan','mimi','jono','ida'];<del class="Delete"></del>



    diganti/ngerubah sourcenya dari database gimana, misal field tabelnya itu namapegawai,

    jadi gak manual di ketik ali budi amir gtu om..
  • edited April 5
    tinggal di query dan di echo to mas

    atau elo bisa pake ajax buat load datanya
    response nya pake aja json
  • naah iyaa, brrti tinggal di query dan di echo aj kan, ini yang saya tanyakan..

    tadi saya cuma gaktau, apakah ada syarat khusus yang harus diubah ketika meng query di js itu.. kan gak seperti di html soalnya, jdi saya kurang paham..

    nanti saya coba dulu, saya blm dirumah soalnya.. nanti saya tanya lagi yaa kalo gak keberatan kalo salah meng query datanya di js itu..
  • edited April 5
    tergantung ...

    itu kan yg gw tunjukin cuma array 1 dimensi
    bisa dibilang isinya hanya untuk 1 field per tampilan

    kalo elo mau bikin buat banyak field (1 form) ...
    ya array nya mesti - minimal - array 2 dimensi
    atau kalo pun tetep pake array 1 dimensi, mesti ada proses split

    terserah elo, kreativitas elo sendiri
  • edited April 6
    Iyaa om, udah bisa tinggal di echo aj, jadi begini
    <?
    $con=mysqli_connect("localhost","root","","db");
    $sql = "SELECT namapegawai FROM tb_pegawai
    WHERE namapegawai LIMIT 10";
    $result = mysqli_query($con,$sql);
    //$result = $mysqli->query($sql);

    $json = [];
    while($row = $result->fetch_assoc()){
    $json[] = $row['namapegawai'];
    }
    ?>

    <input type="text" id="test" value="">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    var idx=0;
    var arr = <? echo json_encode($json); ?>;

    $(document).keydown(function(event) {

    switch(event.keyCode) {
    case 37: // panah kiri
    case 38:idx-=idx>1?1:0;idx=idx<1?1:idx;break; // panah atas
    case 39: // panah kanan
    case 40:idx+=idx<arr.length-1?1:0;break; // panah bawah
    case 27:idx=0;break; // esc

    //default:alert("keyCode tombol yg ditekan : "+event.keyCode);break;
    }
    $("#test").val(arr[idx]);
    });
    </script>
    Makasih om ilmunya..
  • edited April 9
    om labalaba.. tanya lagi om dong..
    <script type="text/javascript">
    $(document).ready(function(){
    $('#kodeagen').change(function(){
    var kodeagentampil = $('#kodeagen').val();
    $.ajax({
    method: "POST",
    dataType: 'json',
    url: "modul/mod_proses/prosestampil.php",
    data: { kode_agen: kodeagentampil}
    })
    .done(function( hasilajax ) {
    $('#namaagen').val(hasilajax['nama_agen']);
    $('#alamatrumahagen').val(hasilajax['alamat_rumah']);
    $('#kelurahanagen').val(hasilajax['kelurahan_agen']);
    });
    })
    });
    </script>

    <script>
    <?
    $result = $db->query("select id_agen_detail,id_agen,kode_agen from tb_agen_detail limit 10");
    //$result = $mysqli->query($sql);
    $json = [];
    while($row = $result->fetch_assoc()){
    $json[] = $row['kode_agen'];
    }
    ?>

    var idx=0;
    var arr = <? echo json_encode($json); ?>;

    $(document).keydown(function(event) {

    switch(event.keyCode) {
    case 37: // panah kiri
    case 38:idx-=idx>1?1:0;idx=idx<1?1:idx;break; // panah atas
    case 39: // panah kanan
    case 40:idx+=idx<arr.length-1?1:0;break; // panah bawah
    case 27:idx=0;break; // esc

    //default:alert("keyCode tombol yg ditekan : "+event.keyCode);break;
    }

    $("#kodeagen").val(arr[idx]);
    });
    </script>


    <script type="text/javascript">
    function refresh() {
    document.getElementById("kodeagen").value = "";
    document.getElementById('kodeagen').disabled = false;
    document.getElementById("kodeagen").focus();
    document.getElementById("kodeagen").id="kodeagen2";

    }
    </script>
    <script type="text/javascript">
    $('#kodeagen').keyup(function(e) {
    if(e.keyCode == 13 && !e.shiftKey) { // enter/return
    e.preventDefault();
    document.getElementById('kodeagen2').disabled = true;
    document.getElementById("kodeagen2").id="kodeagen";
    }
    });

    </script>
    maklum om.. nubi nih.. banyak tanya,

    jadi kan case kmrn udh bisa, trs saya gabungin sama js lain malah tabrakan kayanya fungsinya, saya gak paham gabunginnya.

    case kemarin kan, kalo di next/prev pake keyboard langsung mncul datanya (kodeagen), naah saya gabungin biar ketika kodeagen terisi data namaagen alamat dll itu change otomatis muncul om, auto isi gitu, atau ketika diketik kode agennya terus di enter jadi auto isi, tapi jadi gak running semua, tapi kalo saya pake salah satu baru bisa..
  • saya gak paham memodifikasinya om... maklum nubi di js.. :s
    mohon pencerahannya...
  • edited April 10
    kalo pake jquery jangan setengah-setengah ...
    sayang resource memori nya sudah terlanjur nge-load jquery di client
    sekalian aja ...

    yg kaya begini

    document.getElementById("kodeagen").value = "";
    document.getElementById('kodeagen').disabled = false;
    document.getElementById("kodeagen").focus();
    document.getElementById("kodeagen").id="kodeagen2";

    langsung aja pake jquery juga

    $("#kodeagen").val("");
    $("#kodeagen").prop("disabled",false);
    $("#kodeagen").focus();
    $("#kodeagen").prop("id","kodeagen2"); <~~ cuma ini bikin bingung ...

    itu logikanya gimana ?

    pertama ambil element dgn "id" = "kodeagen" ... ok, anggap dapat element nya
    trus "id" nya di ubah jadi "kodeagen2" ?
    serius itu yg elo mau ?

    refresh() itu dipanggil saat apa to ?
    kalo "id" beneran berubah, trus ini :
    var kodeagentampil = $('#kodeagen').val();
    ambil value nya "id" yg mana ?
    "id" nya jangan2 sudah jadi "kodeagen2"

    id "kodeagen2" cuma bakal balik jadi "kodeagen" kalo cursor elo fokus ke isian dan setelah elo menekan tombol <enter>



    ttg yg onchange ...
    daripada bikin onchange, napa ndak digabung saja ama onkeydown nya

    elo kan bisa bikin if() setelah switch()
    ...
    var arr = ['ali','budi','amir','toni','wati','iwan','mimi','jono','ida'];
    var inkeys = [27,37,38,39,40];
    ...
    $("#test").keydown(function(event) {
    switch(event.keyCode) {
    ...
    }

    if(inkeys.indexOf(event.keyCode)>=0) {
    ...
    ...
    ...
    }
    ...
    });
    ...
    lakukan apa yg mau elo buat di onchange di dalam if()
  • edited April 10
    ouwhh jadi bikin event onchangenya di dalam if yaa om..
    trs di dalem switchswitch(event.keyCode) dibuat apa om ?
    document.getElementById("kodeagen").value = "";
    document.getElementById('kodeagen').disabled = false;
    document.getElementById("kodeagen").focus();
    document.getElementById("kodeagen").id="kodeagen2";


    baris kode di atas gak penting sih, saya pake cuma buat ngakalin biar bisa onchange n keyup enternya jdi saya ubah id kodeagennya jadi kodeagen2.. wkwkwkwk.. tapi gagal juga..
     
    <script type="text/javascript">
    $(document).ready(function(){
    $('#kodeagen').change(function(){
    var kodeagentampil = $('#kodeagen').val();
    $.ajax({
    method: "POST",
    dataType: 'json',
    url: "modul/mod_proses/prosestampil.php",
    data: { kode_agen: kodeagentampil}
    })
    .done(function( hasilajax ) {
    $('#namaagen').val(hasilajax['nama_agen']);
    $('#alamatrumahagen').val(hasilajax['alamat_rumah']);
    $('#kelurahanagen').val(hasilajax['kelurahan_agen']);
    });
    })
    });
    </script>
     
    <script>
    <?
    $result = $db->query("select id_agen_detail,id_agen,kode_agen from tb_agen_detail limit 10");
    //$result = $mysqli->query($sql);
    $json = [];
    while($row = $result->fetch_assoc()){
    $json[] = $row['kode_agen'];
    }
    ?>
     
    var idx=0;
    var arr = <? echo json_encode($json); ?>;
     
    $(document).keydown(function(event) {
     
    switch(event.keyCode) {
    case 37: // panah kiri
    case 38:idx-=idx>1?1:0;idx=idx<1?1:idx;break; // panah atas
    case 39: // panah kanan
    case 40:idx+=idx<arr.length-1?1:0;break; // panah bawah
    case 27:idx=0;break; // esc
     
    //default:alert("keyCode tombol yg ditekan : "+event.keyCode);break;
    }
     
    $("#kodeagen").val(arr[idx]);
    });
    </script>
     
    <script type="text/javascript">
    $('#kodeagen').keyup(function(e) {
    if(e.keyCode == 13 && !e.shiftKey) { // enter/return
    //gaktaumau buat apa
    }
    });
     
    </script>



    intinya sih om saya mau gabungin jquery yang itu doang biar bisa
    1. Ketika di next n prev pake keyboard kode agennya muncul n otomatis autofill data nama, alamat dll,
    2. Terus kalo disearch misal diketik kode agen 12345 terus enter data nama, alamat dllnya juga auto ke isi gtu om..

    cuma blm paham ilmunya, makanya ditanyakan..
  • isi switch nya ya tetep seperti semula ...

    gw nunjukin struktur nya
    supaya elo tau isi onchange nya harusnya ada di mana

    jadi onchange nya bisa elo hapus
    tapi fungsi yg elo niatkan di dalam nya tetep jalan dgn event yg bener
  • hemmhh.. ok.. otw coba dulu..
  • brrti yang event pas di isi 12345 trs enter trs autofillnya itu om gimana ??
  • enter buat apa ?

    kan elo tekan tombol kiri kanan juga langsung load data ajax
  • edited April 10
    &lt;script type="text/javascript">
    $('#kodeagen').keypress(function(e) {
    if(e.which == 13) {
    e.preventDefault();
    var kodeagentampil = $('#kodeagen').val();
    $.ajax({
    method: "POST",
    dataType: 'json',
    url: "ajaxrespon.php",
    data: { kode_agen: kodeagentampil}
    })
    .done(function( hasilajax ) {
    $('#namaagen').val(hasilajax['nama_agen']);
    $('#alamatrumahagen').val(hasilajax['alamat_rumah']);
    $('#kelurahanagen').val(hasilajax['kelurahan_agen']);
    });
     
    }
    });
    &lt;/script>


    onchangenya saya ganti keypress, pake enter,

    iyaa om, jadi digabungin sama kaya search gtu, jadi
    1. kalo geser kiri kanan langsung load trs otomatis ke isi textbox nama, alamat dll,
    2. kalo di input manual ketik 12345 trs enter, datanya ke load juga trs otomatis ke isi textbox nama dll.
    <script>
    <?
    $result = $db->query("select id_agen_detail,id_agen,kode_agen from tb_agen_detail limit 10");
    //$result = $mysqli->query($sql);
    $json = [];
    while($row = $result->fetch_assoc()){
    $json[] = $row['kode_agen'];
    }
    ?>

    var idx=0;
    var arr = <? echo json_encode($json); ?>;

    $(document).keydown(function(event) {

    switch(event.keyCode) {
    case 38:idx-=idx>1?1:0;idx=idx<1?1:idx;break; // panah atas
    case 40:idx+=idx<arr.length-1?1:0;break; // panah bawah
    case 27:idx=0;break; // esc

    //default:alert("keyCode tombol yg ditekan : "+event.keyCode);break;
    }

    $("#kodeagen").val(arr[idx]);

    });

    </script>
    pake itu backspacenya/delete gak jalan, jadi gakbisa input manual.
  • edited April 10
    <!DOCTYPE html>
    <html>
    <head>
    <title>BELAJAR AJAX</title>
    <!-- INCLUDE jQuery -->
    </head>
    <body>
    <form action="#" method="post">
    <input type="text" name="kodeagen" id="kodeagen" placeholder="NPM">
    <input type="text" name="namaagen" id="namaagen" placeholder="Nama">
    <input type="text" name="alamatrumahagen" id="alamatrumahagen" placeholder="Nama">
    <input type="text" name="kelurahanagen" id="kelurahanagen" placeholder="Nama">
    <input type="submit" value="simpan">
    </form>

    <script src="assets/js/jquery-2.1.4.min.js"></script>

    <script>
    <?

    $con=mysqli_connect("localhost","root","password","db_sisko");
    $sql = "SELECT kode_agen FROM tb_agen_detail LIMIT 10";
    $result = mysqli_query($con,$sql);
    //$result = $mysqli->query($sql);

    $json = [];
    while($row = $result->fetch_assoc()){
    $json[] = $row['kode_agen'];
    }


    ?>

    var idx=0;
    var arr = <? echo json_encode($json); ?>;

    $(document).keydown(function(event) {
    switch(event.keyCode) {
    default:return true;break;
    case 37:
    case 38:idx-=idx>1?1:0;idx=idx<1?1:idx;break; // panah atas
    case 39: // panah kanan
    case 40:idx+=idx<arr.length-1?1:0;break; // panah bawah
    case 27:idx=0;break;

    //default:alert("keyCode tombol yg ditekan : "+event.keyCode);break;
    }

    $("#kodeagen").val(arr[idx]);
    });
    </script>

    <script type="text/javascript">
    $('#kodeagen').keypress(function(e) {
    if(e.which == 13) { // enter/return
    e.preventDefault();

    var kodeagentampil = $('#kodeagen').val();
    $.ajax({ // Memulai ajax
    method: "POST",
    dataType: 'json',
    url: "ajaxrespon.php",
    data: { kode_agen: kodeagentampil}
    })
    .done(function( hasilajax ) {
    $('#namaagen').val(hasilajax['nama_agen']);
    $('#alamatrumahagen').val(hasilajax['alamat_rumah']);
    $('#kelurahanagen').val(hasilajax['kelurahan_agen']);
    });

    }
    });
    </script>


    </body>
    </html>
    Begitu om, tapi jadinya fungsi yang geser atas bawah kanan kirinya gak jalan klo disatuin gtu, tapi fungsi enternya jalan, klo dipisahin baru fungsi geser atas bawah kanan kirinya sama fungsi enternya jalan.

    tadi saya ubah pake struktur yg om kasih gak jalan dua2nya jadinya

    *Maap berantakan
  • edited April 11
    kalo gitu, jadiin satu aja pake onkeyup semua

    kiri, kanan, atas, bawah, esc, enter pake onkeyup semua

    di switch nya, tambahkan utk enter (13)
    isinya buat load data ajax

    array inkeys tetep dipake, tambahkan 13 juga di situ
    if nya inkeys juga dipake

    ini : $("#kodeagen").val(arr[idx]);
    yg masuk ke dalam if nya inkeys

    artinya, update isian field HANYA JIKA elo menekan tombol tertentu (kiri, kanan, atas, bawah, esc, enter)
    selain itu ndak ada proses update isi field
    jadi tombol lain bisa berfungsi
    termasuk backspace yg ndak jalan yg elo keluhkan
    elo bisa edit isinya field
    dan saat tekan enter (13), baru elo load ulang data baru via ajax
  • oh iyaa, bener juga yaa.. di case nya tambahin 13 untuk enter, ok om.. dicoba dulu..
Sign In or Register to comment.