Iso Web Id Tutorial Komputer
Related Articles
Apa sih Enter lost focus Form field itu? adalah sebuah event yang dijalankan ketika kalian menekan tombol enter pada keyboard akan merubah posisi focus pada field lainnya. Lost focus field biasanya digunakan pada web Application untuk menggantikan tombol Tab yang biasa digunakan untuk berpindah focus pada form field lain.
Berikut saya beri contoh penerapannya.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Enter Form</title>
<script type=”text/javascript”>
function nextfield(event, id){ // fungsi saat tombol enter
if(event.keyCode == 13 || event.which == 13){
document.getElementById(id).focus(); // Perpindahan focus
}
}
function ajaxRequest(){
var activexmodes=[“Msxml2.XMLHTTP”, “Microsoft.XMLHTTP”] // Check ActiveX di Internet Eksplorer
if (window.ActiveXObject){ //Support for ActiveXObject in Internet Explorer
for (var i=0; i<activexmodes.length; i++){
try{
return new ActiveXObject(activexmodes[i])
}
catch(e){
alert(‘Browser tidak support ajax’);
}
}
}
else if (window.XMLHttpRequest) // jika Mozilla, Safari etc
return new XMLHttpRequest();
else
return false
}
function ajaxGet(){
var postrequest=new ajaxRequest(); // Panggil fungsi ajax Request
postrequest.onreadystatechange=function(){
if (postrequest.readyState==4){
if (postrequest.status==200 || window.location.href.indexOf(“http”)==-1){
document.getElementById(“result”).innerHTML=postrequest.responseText // Respon dari ajax diletakkan pada id result
}
else{
alert(“Error, ambil halaman ajax.”)
}
}
}var namaValue=encodeURIComponent(document.getElementById(“nama”).value) ; // Nilai value dari field Nama
var alamatValue=encodeURIComponent(document.getElementById(“alamat”).value) ; // NIlai value dari field alamat
var parameters=”name=”+namaValue+”&alamat=”+alamatValue; // Nilai post field yang dikirim
postrequest.open(“POST”, “proses.php”, true); // panggil file proses.php
postrequest.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”) ; // Request header default form
postrequest.send(parameters) // kirim post
}
</script>
</head>
<body>
<form action=”” method=”get” name=”form” id=”form”>
Nama :
<input type=”text” name=”nama” id=”nama” onkeypress=”return nextfield(event, ‘alamat’)” /><br />
Alamat :
<input type=”text” name=”alamat” id=”alamat” onkeypress=”return nextfield(event, ‘bt’)” /><br />
<input type=”button” id=”bt” onclick=”ajaxGet()” value=”kirim” />
</form>
<div id=”result”></div>
</body>
</html>
Pada file proses.php isinya :
<?php
echo “Nama anda “. $_POST[‘nama’].” <br />”;
echo “Alamat anda “.$_POST[‘alamat’];
?>
Cukup sederhana script diatas, cara penggunaannya cukup kalian menekan tombol enter untuk perpindah dari field satu ke field lain.
Catatan :
– Pada artikel kali ini saya tidak menggunakan Framework jquery
