Jquery PHP Pada Input

Takeru123 · April 2018

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...

labalaba · April 2018

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

Takeru123 · April 2018

saya gak paham jquery soalnya mastah labalaba.. bisa minta contoh penggunaannya ?
atau tempel link tutorialnya aj disini biar mastah labalaba gak repot2..

labalaba · April 2018

jquery ya buka dokumentasi jquery to mas ...

https://api.jquery.com/keydown/

Takeru123 · April 2018

oke mastah labalaba.. makasih pencerahannya.. dicoba dulu langsung...

labalaba · April 2018

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

Takeru123 · April 2018

Waah siaap... makasi om labalaba... implementasinya lebih jelas klo ada contoh bgni.. hhehe..

Takeru123 · April 2018

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..

labalaba · April 2018

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

Takeru123 · April 2018

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..

labalaba · April 2018

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

Takeru123 · April 2018

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..

labalaba · April 2018

tinggal di query dan di echo to mas

atau elo bisa pake ajax buat load datanya
response nya pake aja json

Takeru123 · April 2018

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..

labalaba · April 2018

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

Takeru123 · April 2018

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..

Takeru123 · April 2018

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..

Takeru123 · April 2018

saya gak paham memodifikasinya om... maklum nubi di js..

mohon pencerahannya...

labalaba · April 2018

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()

Takeru123 · April 2018

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..

labalaba · April 2018

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

Takeru123 · April 2018

hemmhh.. ok.. otw coba dulu..

Takeru123 · April 2018

brrti yang event pas di isi 12345 trs enter trs autofillnya itu om gimana ??

labalaba · April 2018

enter buat apa ?

kan elo tekan tombol kiri kanan juga langsung load data ajax

Takeru123 · April 2018

&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.

Takeru123 · April 2018

<!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

labalaba · April 2018

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

Takeru123 · April 2018

oh iyaa, bener juga yaa.. di case nya tambahin 13 untuk enter, ok om.. dicoba dulu..

Howdy, Stranger!

Categories

Jquery PHP Pada Input

Comments