Membuat sisa karakter pada formulir
Jika kita mengisi sebuah formulir yang disediakan oleh pengelola suatu website, misalnya ketika mengisi judul sebuah iklan kadang apa yang kita tulis terpotong atau judul yang kita tulis tidak semuanya bisa tampil. Hal tersebut terjadi karena pengelola website tersebut membatasi jumlah karakter yang dapat kita tulis untuk judul iklan, tapi tidak memberitahukan berapa jumlah karakter yang tersisa ketika kita mengisi judul iklan kita. Untuk masalah tersebut kita bisa menambahkan keterangan sisa karakter pada formulir yang kita buat. Di bawah ini adalah contoh scriptnya :
Pertama-tama Formnya kita beri nama. Misalnya "myform". Untuk judul iklan kita batasi hanya 30 karakter dan untuk teks iklan kita batasi sampai 255 karakter.
<html>
<head>
<script type="text/javascript">
var maxChar1 = 30;
var maxChar2 = 255;
function initial()
{
document.myform.counter1.value = maxChar1;
document.myform.counter2.value = maxChar2;
}
function count()
{
document.myform.counter1.value = maxChar1 - document.myform.judul.value.length;
document.myform.counter2.value = maxChar2 - document.myform.teks.value.length;
}
</script>
</head>
<body onload="initial()">
<font face=verdana size=2 color=yellow>Perhatikan sisa karakter!!!</font><br>
<form name=myform action="" method=post>
<table align=center bgcolor=#333366>
<tr>
<td valign=top><font face=verdana size=2 color=white>Judul</td>
<td><input type=text name='judul' onKeyUp=count()><br>
<font face=verdana size=1 color=white>sisa karakter<input type="text" readonly name="counter1" size="1"> <blink><-</blink></td></tr>
<tr><td><font face=verdana size=2 color=white>Teks Iklan</td>
<td><input type=text name='teks' onKeyUp=count()><br>
<font face=verdana size=1 color=white>sisa karakter<input type="text" readonly name="counter2" size="1"> <blink><-</blink></td></tr>
<tr><td colspan=2 align=center><input type=submit value=Kirim></td></tr>
</table>
</body>
</html>
Pertama-tama Formnya kita beri nama. Misalnya "myform". Untuk judul iklan kita batasi hanya 30 karakter dan untuk teks iklan kita batasi sampai 255 karakter.
<html>
<head>
<script type="text/javascript">
var maxChar1 = 30;
var maxChar2 = 255;
function initial()
{
document.myform.counter1.value = maxChar1;
document.myform.counter2.value = maxChar2;
}
function count()
{
document.myform.counter1.value = maxChar1 - document.myform.judul.value.length;
document.myform.counter2.value = maxChar2 - document.myform.teks.value.length;
}
</script>
</head>
<body onload="initial()">
<font face=verdana size=2 color=yellow>Perhatikan sisa karakter!!!</font><br>
<form name=myform action="" method=post>
<table align=center bgcolor=#333366>
<tr>
<td valign=top><font face=verdana size=2 color=white>Judul</td>
<td><input type=text name='judul' onKeyUp=count()><br>
<font face=verdana size=1 color=white>sisa karakter<input type="text" readonly name="counter1" size="1"> <blink><-</blink></td></tr>
<tr><td><font face=verdana size=2 color=white>Teks Iklan</td>
<td><input type=text name='teks' onKeyUp=count()><br>
<font face=verdana size=1 color=white>sisa karakter<input type="text" readonly name="counter2" size="1"> <blink><-</blink></td></tr>
<tr><td colspan=2 align=center><input type=submit value=Kirim></td></tr>
</table>
</body>
</html>
Thanks mas...scriptnya sangat membantu. Tlg tambah trus tulisannya
ReplyDeleteterima kasih atas komentarnya ya. Mudah-mudahan gak bosen-bosen nulis nih...
ReplyDelete