How To Insert Ajax Result In A Text Field

4 min readJul 28, 2020

In this tutorial, we are going to learn how to insert ajax results in the text field. Most of the ajax request is sent via get method but here we will use the post method. As said earlier, we will send the ajax request first and take the response from the database in JSON format.

Also Read, How to append data to dropdownlist using Jquery Ajax PHP

First, we must have the tables. Here I am using two tables, city and pin codes.

DDL information of the table ‘city’
— — — — — — — — — — — — — -
CREATE TABLE `city` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`state_id` int(10) DEFAULT NULL,
`city_name` varchar(225) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

DDL information of the table ‘pincodes’
— — — — — — — — — — — — — — — — –
CREATE TABLE `pincodes` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`city_id` int(10) DEFAULT NULL,
`pin_code` varchar(225) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

How to get input data from frontend using jquery

We will get the input data using the id attribute of a field. In this example, we will get the city name using the id of the city field with the help of change function of jquery while changing city names in the dropdown lists and store it in a variable inside the function.
As we know ajax function has four parameters through which we can send ajax request. Parameters are:- url, type, data, datatype.
Now, we will send the city name in data parameter inside the ajax() function.

How to get the result from the backend using MySQL query inside the PHP script

Now, we will check the city name inside the PHP scripts with the help of $_POST. If the city name exists, then we will execute the required query.
If the result is found, then we will store the result in the pincode variable and if the result is not found or empty then we will store an alternative message in the pincode_error variable.
Finally, we will encode the result in the JSON format using json_encode() function.
Now, we will get the result in a text box with the help of id of a text field.

Complete Code:-

<?php
//session_start();
include('connect.php');
if(isset($_POST['city_name']))
{
	$city_name = $_POST['city_name'];
	$stmt = $con->prepare("select * from pincodes where city_id='$city_name'");
	$stmt->execute();
	$pin_details = $stmt->fetch(PDO::FETCH_ASSOC);
//fetch the value into an array
	if($pin_details==''){
		$output['pincode_error'] = '<font color="#ff0000" style="font-size: 20px;">Data not available</font>';
	}
	else{
		$output['pincode'] = $pin_details['pin_code'];
	}
	echo json_encode($output);
	exit;
}
?>
<html>
<head>
<title>ajax example</title>
<link rel="stylesheet" href="bootstrap.css" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.css" crossorigin="anonymous">
<style>
.container{
	width:50%;
	height:30%;
	padding:20px;
}
</style>
</head>
<body>
<div class="container">
<h3 align="center"><u>FETCH VALUE FROM DATABASE USING AJAX</u></h3>
<br/><br/><br/>
	<form class="form-horizontal" action="#">
		<div id="newuser"></div>
			  <div class="form-group">
			    <label class="control-label col-sm-2" for="state">City*:</label>
<?php
$stmt1 = $con->prepare("select * from city order by id ASC");
$stmt1->execute();
$city_details = $stmt1->fetchAll(PDO::FETCH_ASSOC);
?>
				    <div class="col-sm-10">
				      <select class="form-control" name="city" id="city" required="">
				      	<option value="0">--Please Select--</option> 
				      	<?php
				      	foreach($city_details as $city)
				      	{
							echo '<option value="'.$city['id'].'">'.$city['city_name'].'</option>';
						}
				      	?>
				      </select>
				    </div>
				    
			  </div>
			  <br/>
			  <div id="error_div"></div>
			  <div class="form-group">
			    <label class="control-label col-sm-2" for="city">Pincode*:</label>
				    <div class="col-sm-10">
				     	<input type="text" name="pincode" id="pin" class="form-control">
				    </div>
			   </div>
		</form>
    </div>
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
//insert Data
$('#city').change(function(){
	var city = $('#city').val();
	//alert(city);
	//send request to the ajax
$.ajax({
		url: 'valueajax.php',
		type: 'post',
		data: {
			'city_name': city
		},
		dataType: 'json',
	})
	.done(function(data){
		if(data.pincode_error){
			    $('#pin').val('');	
				$('#error_div').html(data.pincode_error);
			}
			else{
				$('#pin').val(data.pincode);
			}
		})
		.fail(function(data,xhr,textStatus,errorThrown){
			alert(errorThrown);
	});
});
</script>
</body>
</html>

NOTE*
— — –
Download the bootstrap CSS and js files from google and include the path of the files in the href attribute of link tag and src attribute of the script tag respectively.

Also Read, How to search live data from database using ajax in PHP
CONCLUSION:- I hope this article will help you to display data based on dropdown selection into a text field using ajax jquery in PHP.

How To Insert Ajax Result In A Text Field

How to get input data from frontend using jquery

How to get the result from the backend using MySQL query inside the PHP script

Written by Bipsmedium