Count TextArea Character in the Form with PHP

Februari 15, 2011

Case Study : Create script to count the character in the textarea
Requirements: WebServer Package, already installed.

Maybe we have ever find sms web application, ie applications that are used to send sms via web applications. Here we will not discuss about the processing of SMS, but we will discuss about the interface that is used in sending sms, usually in the form textarea, which will provide certain limitations on number of characters that have been determined (on sms, generally is 160 characters)

Nah. How do we calculate the characters written in the textarea?

With Javascript.

Step 1 : Prepare the work directory

Create folder named tutorphp in your document root
Save all file in this tutorial in this folder.

Step 2 :Create Form Textarea

Type the following script,

<html><head>
<title>Itx.Web.Id</title>
<script type="text/javascript" src="cek_karakter.js"></script>
</head>
<body>
<form name=form method=post>
<h3> Write Your Message Here </h3>
<textarea onKeyPress=cek_karakter(this.form); onKeyDown=cek_karakter(this.form); name=teks rows=4 cols=30></textarea>
<br> <br>
<input size=1 value=10 name=total>
</form>
</body>

</html>

Save with the name hitung_textarea.php

Step 3 : Create Javascript to Count Character in the Textarea

Type the following script,

function cek_karakter(form) {
maks = 10; // max character
if (form.teks.value.length >= maks) {
var message = "0 Character Left ! "; //alert if character limit reacher
alert(message);
form.teks.value = form.teks.value.substring(0, maks); //trim the textarea
}
else {
form.total.value = maks - form.teks.value.length;} //count the character
}

Save with the name cek_karakter.js

Step 4 : Testing Code

Go to http://localhost/tutorial/hitung_karakter.php. You’ll see a form that you created, with the character limit is 10 (you can set yourself)
Try typing something in the textarea, then the counter will start counting down, and when the character limit has been reached, the alerts appear as shown below

Hal yang juga menarik:

Hak Cipta

Semua skrip dan teknik dalam artikel di itx.web.id boleh digunakan sebagaimana kehendakmu tanpa perlu mencantumkan sumber. Kamu tidak boleh mengkopi seluruh artikel, dalam Bahasa Indonesia ataupun diterjemahkan ke dalam bahasa lain.

2 Comments

Gabrielle Magazine berkata:

Februari 21, 2011 pukul 12:17 am

Hi, I am using the bombax theme in urban on my site (gabriellemagazine.com) I want to have 9 entries on the front page instead of 10 so that it looks like a magazine. Could you please take a look and tell me what to do? Thanks.

Balas
Gabrielle Magazine berkata:

Februari 21, 2011 pukul 12:17 am

Hi, saya menggunakan tema bombax di perkotaan di situs saya (gabriellemagazine.com) Saya ingin memiliki 9 entri di halaman depan, bukan 10 sehingga terlihat seperti majalah. Bisa tolong melihat dan katakan padaku apa yang harus dilakukan? Terima kasih.

Balas