loading textbox using ajaxLearning Curve- Perfect Tutorial for the beginers | Learning Curve- Perfect Tutorial for the beginers

autopopulating text box using ajax,textbox data loading using ajax

Below scripts describes how to autopopulate a textbox and also Using a text box value how to load other textboxes using ajax index.php

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<html>

<head>

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

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

$(document).ready(function(){

$("#name").autocomplete({

source:'getautovalue.php',

minLength:1

});

</script>

</head>

<body>

<label for="state">State :</label> <input type="text" id="state" name="state" class="textbox" /><br>

</div>

</body>

</html>

search.php

<?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;
 ?>

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

<?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);
?>

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

<?php
  mysql_connect("localhost","root","") or die("Mysql Connection error");
  mysql_select_db("my_testdb") or die("Error in Database selection");
?>

<?php

mysql_connect("localhost","root","") or die("Mysql Connection error");

mysql_select_db("my_testdb") or die("Error in Database selection");