Below scripts describes how to autopopulate a textbox and also Using a text box value how to load other textboxes using ajax
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<html> <head> <style type="text/css"> #outerdiv { background-color: lightgreen; width: 500px; padding: 25px; border: 1px solid green; margin: 1px; } #button_search { margin:25px 12px 22px 44px; width: 40px; height:30px; border:solid #366FEB 1px; background: #91B2FA; } #button_clear { width: 48px; height:30px; border:solid #366FEB 1px; background: #91B2FA; } label { height: 35px; line-height: 35px; position: relative; } .textbox { border: 1px dotted #000000; outline:0; height:25px; width: 275px; margin:0px 0px 12px 21px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" /> <script type="text/javascript"> $(document).ready(function(){ function search(){ var name_entered=$("#name").val(); if(name_entered!=""){ $.ajax({ type:"post", url:"search.php", data:"name_entered="+name_entered, success:function(data){ var array = data.split('#'); document.getElementById("city").value=array[0]; document.getElementById("state").value=array[1]; $("#Go").val(""); } }); } } $("#button_search").click(function(){ search(); }); $("#button_clear").click(function(){ document.getElementById("city").value=""; document.getElementById("state").value=""; document.getElementById("name").value=""; }); $('#name').keyup(function(e) { if(e.keyCode == 13) { search(); } }); }); </script> <script type="text/javascript"> $(document).ready(function(){ $("#name").autocomplete({ source:'getautovalue.php', minLength:1 }); }); </script> </head> <body> <div id="outerdiv"> <label for="name">Name :</label> <input type="text" id="name" name="name" class="textbox"/><br> <label for="city">City :</label> <input type="text" id="city" name="city" class="textbox"/><br> <label for="state">State :</label> <input type="text" id="state" name="state" class="textbox" /><br> <input type="button" id="button_search" value="Go" /><input type="button" id="button_clear" value="Clear" /> </div> </body> </html> |
search.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php include "db.php"; $name_entered=$_POST["name_entered"]; $result=mysql_query("SELECT * FROM users where name='$name_entered'"); $found=mysql_num_rows($result); $output= " "."#". " "; if($found>0){ $output=""; while($row=mysql_fetch_array($result)){ $output=$row['city']."#".$row['state']; } }else{ echo $output; } echo $output; ?> |
getautovalue.php
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php include "db.php"; $term=$_GET["term"]; $query=mysql_query("SELECT * FROM users where name like '%$term%'"); $json=array(); while($output=mysql_fetch_array($query)){ $json[]=array('value'=> $output["name"]); } echo json_encode($json); ?> |
db.php
1 2 3 4 |
<?php mysql_connect("localhost","root","") or die("Mysql Connection error"); mysql_select_db("my_testdb") or die("Error in Database selection"); ?> |