jQuery - Ajax Call onChange Event

Submitted by fkgeo on Thursday, December 28, 2017 - 20:25.

Language

In this tutorial we are covering JQuery--Ajax Call onChange in input in ajax call will be made and user picture will be retrieved from MySql and will be placed automatically on user pict if the username is wrong then anonymous picture will be placed

1. Create a login.php page

coding of login.php 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>Power Tricks by fk</title>
  5. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  6. <script src='js/bootstrap.min.js'></script>
  7. <script src='js/jquery.js'></script>
  8. <script type="text/javascript">
  9. 	$(document).ready(function(){
  10. 		//jquery script
  11. 		$("#username").change(function(){
  12. 			var username = $(this).val();
  13. 			//now sending this username to ajax page for geting img saved against this username.
  14. 			$.ajax({
  15. 				url:"ajaxpage.php",
  16. 				data:{data:username}
  17. 			}).done(function(result)
  18. 			{
  19. 				//now assign result to its related place
  20. 				$(".img").html(result);
  21. 			})
  22. 		});
  23.  
  24. 	});
  25. </script>
  26. <style type="text/css">
  27. 	.cntr {width: 50% ;margin: auto}
  28. </style>
  29. </head>
  30. <body>
  31.  
  32. <div class="well well-sm cntr">
  33. 	<h3 class="well well-sm " style="text-align: center;">Login here</h3>
  34. 	<div class="img ">
  35. 		<img src="photo/user.png"  class="img-responsive center" style="width: 233px;margin: auto;">
  36. 	</div><br>
  37. 	<input type="text" placeholder="username" class="form-control cntr input-sm" id="username">
  38. 	<input type="text" placeholder="password" class="form-control cntr input-sm" name=""><br>
  39. 	<button class="btn btn-primary btn-sm btn-block cntr">Login</button>
  40. </div>
  41.  
  42. </body>
  43. </html>

Ajax page for retreive data from Database

coding of ajaxPage.php 
  1. <?php 
  2.  
  3.  
  4. //now here we have to receive that data
  5. $username = $_REQUEST['data'];
  6.  
  7. //now if you want to get img from database
  8. //conect database here and get back the img
  9. //lets concet database here.
  10.  
  11. $conn = new mysqli('localhost','root','','powertricks');
  12.  
  13. $query = $conn->query("select userimg from login where username = '$username'");
  14.  
  15. if($query->num_rows > 0)
  16. {
  17. 	 $userData = $query->fetch_assoc();
  18. 		echo "<img src='photo/".$userData['userimg']."'class='img-responsive center' style='width: 233px;margin: auto;' >";
  19. }
  20. else
  21. 	echo "<img src='photo/unknown.png' class='img-responsive center' style='width: 233px;margin: auto;' >";
  22. //if not found then unknown.png will be returned
  23.  
  24.  ?>
Note: don't forget to include these files 
  1. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  2. <script src='js/bootstrap.min.js'></script>
  3. <script src='js/jquery.js'></script>
Video Tutorial for this topic link is:https://youtu.be/IiIMObFHqCc Sample Preview for this tutorial Full source code is attached.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags

Add new comment

About text formats
  • 2743 views