AutoFill the form if the data exists in database(By just filling only one value))

Posted by
             Want to do autofill all the textfileds by just taking input of only one textfield without using the submit button. Here the solution is: AJAX. Using AJAX you can get the solution. WHAT AJAX IS? AJAX  stands for Asynchronous JavaScript and XML.It is made popular by GOOGLE in 2005.Google suggest is the result of AJAX.When you type in google and it gives you the suggestion ,it is done by AJAX.
   
AJAX exchange data with server and updates parts of a webpage without uploading whole page. It does granular update.It saves time and reduces load on server by doing granular update.
Now the time for solution:
First create a form AutoFill.jsp

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
      pageEncoding="ISO-8859-1"%>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
   <head>  
     <script type="text/javascript">  
       var xmlHttp1 ;  
       function searchSuggest(str)  
       {  
         if (typeof XMLHttpRequest != "undefined")  
         {  
           xmlHttp1= new XMLHttpRequest();  
         }  
         else if (window.ActiveXObject)  
         {  
           xmlHttp1= new ActiveXObject("Microsoft.XMLHTTP");  
         }  
         if (xmlHttp1==null)  
         {  
           alert ("Browser does not support XMLHTTP Request");  
           return  
         }  
         var url="search.jsp";  
         url += "?search=" +str;  
         xmlHttp1.onreadystatechange = stateChange1;  
         xmlHttp1.open("GET", url, true);  
         xmlHttp1.send();  
       }  
       function stateChange1()  
       {  
         if (xmlHttp1.readyState==4 || xmlHttp1.readyState=="complete")  
         {  
           var strResponse=xmlHttp1.responseText;  
           if (strResponse != "")  
           {  
             //Split response into array  
             var arrResponse = strResponse.split("brk");  
             var arrLen = arrResponse.length;  
             for(i=0;i<arrLen;i++)  
             {  
               document.getElementById("hint").innerHTML=arrResponse[0];  
               document.getElementById("firstName").innerHTML=arrResponse[1];  
               document.getElementById("lastName").innerHTML=arrResponse[2];  
               document.getElementById("no").innerHTML=arrResponse[3];  
               document.getElementById("cl").innerHTML=arrResponse[4];  
             }  
           }  
         }  
       }  
     </script>  
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
     <title>Insert title here</title>  
   </head>  
   <body>  
     <form method="post">  
       <table>  
         <tr>  
           <td> Email Id:</td>  
           <td><div id="eid"><input type="text" name="eid" onkeyup="searchSuggest(this.value);" ></div></td>  
           <td><div id="hint"></div></td>  
         </tr>  
         <tr>  
           <td> First Name:</td>  
           <td><div id="firstName"><input type="text" name="firstName"></div></td>  
         </tr>  
         <tr>  
           <td> Last Name:</td>  
           <td><div id="lastName"><input type="text" name="lastName"></div></td>  
         </tr>  
         <tr>  
           <td> Mobile No:</td>  
           <td><div id="no"><input type="text" name="no"></div></td>  
         </tr>  
         <tr>  
           <td> Current Location:</td>  
           <td><div id="cl"><input type="text" name="cl"></div></td>  
         </tr>  
       </table>  
     </form>  
   </body>  
 </html>  

2.Search.jsp

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
      pageEncoding="ISO-8859-1"%>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <%@page import="java.sql.*" %>  
 <html>  
   <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
     <title>Insert title here</title>  
   </head>  
   <body>  
     <%  
       String consultant = request.getParameter("search").toString();  
       String buff1 = "<div id='hint'>";  
       String buff2 = "<input type='text' name='firstName' value=''>";  
       String buff3 = "<input type='text' name='lastName' value=''>";  
       String buff4 = "<input type='text' name='no' value=''>";  
       String buff5 = "<input type='text' name='cl' value=''>";  
       try {  
         Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");  
         Connection conn = DriverManager.getConnection("jdbc:odbc:java2career");  
         Statement stmt = conn.createStatement();  
         ResultSet rs = stmt.executeQuery("Select * from person where email_id= '" + consultant + "'");  
         while (rs.next()) {  
           buff1 = "email already exists" + "<br>";  
           buff2 = "<input type='text' name='firstName' value='" + rs.getString(2) + "'>";  
           buff3 = "<input type='text' name='lastName' value='" + rs.getString(3) + "'>";  
           buff4 = "<input type='text' name='no' value='" + rs.getString(4) + "'>";  
           buff5 = "<input type='text' name='cl' value='" + rs.getString(5) + "'>";  
         }  
         buff1 = buff1 + "</div>";  
         buff2 = buff2 + "</input></div>";  
         buff3 = buff3 + "</input>";  
         buff4 = buff4 + "</input>";  
         buff5 = buff5 + "</input>";  
         response.getWriter().println(buff1 + "brk" + buff2 + "brk" + buff3 + "brk" + buff4 + "brk" + buff5);  
       } catch (Exception e) {  
         System.out.println(e);  
       }  
     %>  
   </body>  
 </html>  

3. Now create table person.

 CREATE TABLE person(email_id VARCHAR(60) PRIMARY KEY, fname VARCHAR(50),lname VARCHAR(50),number VARCHAR(10),location VARCHAR(50));  

4. Insert values in person table

 INSERT INTO person VALUES("roy@java2career.com","roy","larry","9634089876","newyork");  

5. Here is your output:


You may also like below posts:

  1. Insert Data into database from Excel File
  2. Insert file into database in JSP Insert file into database in JSP
  3. Insertion into multiple tables using stored procedure
  4.  Creating a JDBC Application to query SQL SERVER

Leave a Reply