Characters Counter in PHP & AJAX – Video

Here is a small project called “letters counter using PHP & AJAX”. If you know the basic PHP Web Development then it’ll be very easy to understand working with AJAX. AJAX is just a great way to make web development process faster by using JavaScript or jQuery with other programming languages such as PHP and ASP.NET. In this video tutorial, I’ll teach you creating a small but beautiful characters counter using AJAX and PHP.


Steps to Create Letters Counter in PHP

First of all, open notepad++ or any other code editor and create two new pages i.e counter.html and process.php. then write the basic HTML structure, after that you’ll have to create a <div id=”container”></div> tag with an ID of container which will be used for CSS purpose. Then in the same page, you’ll use to style it with CSS, because it’s a small project and everything can be done within the same page. Finally, we’ll add one <textarea></textarea> tag and one <input> tag just for showing it on the browser.

Now the next step will be adding the AJAX script to the HTML, and I have this all together here, this code is the exact code I used in the video tutorials below, so you can simply copy this and paste into your text editor. This is the HTML and AJAX code for this small project.

<!DOCTYPE html>

<title> Letters Counter in PHP</title>
<style type=”text/css”>
#container {
margin:40px auto;
border:2px solid brown;
function ajax(chars){
var req = new XMLHttpRequest();
req.onreadystatechange = function(){
if(req.readyState == 4 && req.status == 200){
document.getElementById(‘show’).innerHTML = req.responseText;


<div id=”container”>
<h2>Enter Characters</h2>
<textarea cols=”30″ rows=”5″ onkeyup=”ajax(this.value);”></textarea><br/>
<input type=”submit” value=”Submit”/>
<div id=”show” style=”color:blue; float:right; margin-right:40px;”></div>


The next and final step is to add the PHP script, which is also ready here, you just need to copy the below code and paste into the process.php which you already have created. After pasting this code into your page, you’ll see the letters counter ready and working on the browser, please use localhost to access this file on your browser.

$chars = $_GET[‘char’];
$len = strlen($chars);
echo “Characters so far: “. $len . “<br>”;
if($len >100){
echo “<p style=’color:red;’>You are exceeding the limit!</p>”;

Now after doing the practical exercise above, it’s time for you to watch the video tutorials below and learn this project yourself, but don’t just watch, practice it.

Video Tutorial #1 of 2

Video Tutorial #2 of 2
After watching the tutorials above, I hope you’ve learned something new today, if you have any question or suggestion then do let me know in the comment section below, I’ll be glad to help you out in anything related to web development or PHP. Have fun!

About Abdul Wali

Abdul Wali is a professional blogger, marketer and web developer working online for last 5 years, he's been deeply involved in PHP, Web Development, SEO and computer video tutorials in different languages i.e English, Urdu and Pashto. You can catch him on and add him on Facebook.

Check Also

web hosting

The Best Web Hosting Providers (Tutorial)

Web hosting is one of the important aspects for establishing a business or website online. If ...