Tutorial Autofill Input Field Based On OnKeyup Another Input Field Value (PHP Ajax Javascript)

Baru-baru ini saya menemui kasus pembuatan input field yang terisi otomatis saat user selesai mengisi input field lainnya. Uniknya lagi, input field tersebut haruslah dinamis. Yang berarti user bisa menambah dan menghapus input field tersebut.

Konsep pertama yang muncul adalah kasus ini harus diselesaikan dengan javascript (untuk membuat add/delete input field yang dinamis). Lalu yang menjadi problem selanjutnya adalah bagaimana membuat input field yang terisi otomatis tersebut (autofill input field)? Pada prinsipnya ini bisa dilakukan seperti ketika membuat combo box dinamis. Yang menjadi pembeda adalah kalau combo box dinamis yang digunakan adalah combo box. Selebihnya konsep pembuatannya dapat ditiru.

Berikut ini contoh pembuatan autofill input field menggunakan PHP, Ajax dan Javascript serta database MySQL

  1. Database dbTes
  2. -- phpMyAdmin SQL Dump
    -- version 3.2.4
    -- http://www.phpmyadmin.net
    --
    -- Host: localhost
    -- Waktu pembuatan: 12. Oktober 2014 jam 11:57
    -- Versi Server: 5.1.41
    -- Versi PHP: 5.3.1
    
    SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
    
    
    /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
    /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
    /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
    /*!40101 SET NAMES utf8 */;
    
    --
    -- Database: `dbTes`
    --
    
    -- --------------------------------------------------------
    
    --
    -- Struktur dari tabel `nilai`
    --
    
    CREATE TABLE IF NOT EXISTS `nilai` (
      `skor` int(3) NOT NULL,
      `predikat` varchar(50) COLLATE latin1_general_ci NOT NULL
    ) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
    
    --
    -- Dumping data untuk tabel `nilai`
    --
    
    INSERT INTO `nilai` (`skor`, `predikat`) VALUES
    (100, 'SEMPURNA'),
    (95, 'BAIK'),
    (80, 'CUKUP'),
    (72, 'KURANG'),
    (60, 'JELEK');
    
    /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
    /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
    /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
    
  3. index.php
  4. <html>
    <head>
      <script type="text/javascript">   
         function ajaxFunction(str,divId)
         {
           var httpxml;
           try
           {
             // Firefox, Opera 8.0+, Safari
             httpxml=new XMLHttpRequest();
           }
           catch (e)
           {
             // Internet Explorer
             try
             {
                httpxml=new ActiveXObject("Msxml2.XMLHTTP");
             }
             catch (e)
             {
                try
                {
                  httpxml=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e)
                {
                  alert("Your browser does not support AJAX!");
                  return false;
                }
             }
          }
          
    	  function stateChanged()
          {
                    if(httpxml.readyState==4)
                        {
                            document.getElementById(divId).innerHTML=httpxml.responseText;
                        }
                    }
                    var url="cek.php";
                    url=url+"?txt="+str;
                    url=url+"&sid="+Math.random();
                    httpxml.onreadystatechange=stateChanged;
                    httpxml.open("GET",url,true);
                    httpxml.send(null);
          }
            
    </script>
    </head>
    	<body>
            <strong>Tutorial Autofill Input Field Based On OnKeyup Another Input Field Value</strong><br/><br/>
    <form name="myForm">
            <table id="fit">
            <tr bgcolor="#E0ECFF">
            <th>Nilai</th>
            <th>Predikat</th>
            </tr>
            <tr>
                <td>
                <input style="width:80px;" type="text" name="skor" onKeyUp="ajaxFunction(this.value,'displayDiv');" />
                </td>
                <td>
                    <div id="displayDiv">
                    	<input style="width:80px;" type="text" name="predikat" />
                    </div>
                </td>
            </tr>
            </table>
        </form>
            * Untuk testing isikan nilai berikut pada kolom Nilai :<br/>
            100 SEMPURNA<br/>
    	 	95 	BAIK<br/>
    	 	80 	CUKUP<br/>
    	 	72 	KURANG<br/>
    	 	60 	JELEK<br/>
    </body>
    </html>
    
  5. cek.php
  6. <?php
    	mysql_connect('localhost','root','');
    	mysql_select_db('dbTes');
    		
    	$in=$_GET['txt'];
    	$msg="";
    	$t=mysql_query("SELECT * FROM nilai WHERE (skor = '$in')");
    	while($nt=mysql_fetch_array($t)){
    		$skor = "$nt[skor]";
    		$predikat = "$nt[predikat]";
    	}
    ?>
    <td><input type="text" name="predikat" value="<?php echo $predikat?>"></td>
    

Oke, mudah-mudahan posting ini bisa membantu memberikan sedikit pencerahan buat saya dan rekan-rekan pengunjung blog kroseva.

 

Best Regards,

kroseva

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s