jQuery – Ajax Call onChange Event using PHP MySQLi

jQuery – Ajax Call onChange Event using PHP MySQLi

In this Post We Will Explain About is jQuery – Ajax Call onChange Event using PHP MySQLi With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to jQuery – Ajax Call onChange Event Example

In this post we will show you Best way to implement Image File Upload With Ajax and PHP , hear for How to show image thumbnail before upload with jQuery with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   PHP Ajax Multiple Images Upload with Thumbnail Preview




JQuery – Ajax Call onChange Event in HTML input in jquery ajax call will be become and user profile picture will be fatched from MySql database as well as will be this Login placed automatically on preview user Images.
if the here Display name student_name is wrong then get the anonymous picture will be Automatically placed

Step 1. Create a index.php page

coding of index.php

<!DOCTYPE html>
<html>
<head>
	<title>JQuery - Ajax Call onChange Event - Power Tricks by Live24u.com</title>
<!-- bootstrap.min.css -->	
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src='js/bootstrap.min.js'></script>
<script src='js/jquery.js'></script>
<script type="text/javascript">
	$(document).ready(function(){
		//simple ajax call using jquery script
		$("#student_name").change(function(){
			var student_name = $(this).val();
			//now sending this student_name to ajax page for fetching student img saved against this student_name.
			$.ajax({
				url:"ajaxpage.php",
				data:{data:student_name}
			}).done(function(result)
			{
				$(".img").html(result);
			})
		});
 
	});
</script>
<style type="text/css">
	.liveCenter {width: 50% ;margin: auto}
</style>
</head>
<body>
 
<div class="well well-sm liveCenter">
	<h3 class="well well-sm " style="text-align: center;">Sign In Here</h3>
	<div class="live img ">
		<img src="media/user.png"  class="live img-responsive center" style="width: 250px;margin: auto;">
	</div><br>
	<input type="text" placeholder="student_name" class="mycl form-control liveCenter input-sm" id="student_name">
	<input type="text" placeholder="Enter Student password" class="mycl form-control liveCenter input-sm" name=""><br>
	<button class="btn btn-primary live btn-sm btn-block liveCenter">Login</button>
</div>
 
</body>
</html>

Setp 2 : jQuery Ajax page for Fetch data from Database

Source code of ajaxPage.php

Also Read :   AngularJS Grid CRUD Example - Angular UI Grid

<?php 
$student_name = $_REQUEST['data'];
$conn = new mysqli('localhost','YOUR_USERNAME','YOUR_PASSWORD','live24u');

$myquery = $conn->query("select studentImg from login where student_name = '$student_name'");
 
if($myquery->num_rows > 0)
{
	 $studentData = $myquery->fetch_assoc();
		echo "<img src='media/".$studentData['studentImg']."'class='live img-responsive center' style='width: 250px;margin: auto;' >";
}
else
	echo "<img src='media/default.png' class='img-responsive center' style='width: 250px;margin: auto;' >";
//if not found any images then default.png will be fetched
 ?>

Step 3 : Note: don’t any forget to include js files

<!-- bootstrap.min.css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!-- bootstrap.min.js -->
<script src='js/bootstrap.min.js'></script>

<!-- jquery.js -->
<script src='js/jquery.js'></script>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is jQuery – Ajax Call onChange Event
with PHP/MySQLi
And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.