This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Thursday, September 25, 2008

MooTools Basic Tips (lesson 3): interaction with HTML Form

This post is the third lesson which I dedicate to MooTools for newbie and illustrates how to implement simple interactions with form input elements using this powerful framework and unobtrusive JavaScript code.

Some time ago I wrote this post where I explained some useful tips to enrich HTML Form using simple JavaScript functions. Some readers asked to me to illustrate similar examples using MooTools and unobtrusive JavaScript code, so in this tutorial I implemented the Twitter-like chars counter example of my previous post. This counter decreases, from the max value of available chars in the input field (20 in this example) to zero, while you type something into the input field:



Click on the link below to download the full code.


Download full code


1. Add MooTools framework on your page
First, you may download the latest version of MooTools and add a link to the framework within the tag <head> of the page:

<script type="text/javascript" src="mootools.svn.js"></script>


2. HTML Code
HTML code for this example is very simple:

<label for="myInput">Write something here:</label>
<input type="text" id="myInput" maxlength="20" />
<span id="counter_number" class="counter">20</span> Remaining chars

In this code I added an input text field with id="myInput" and a span element with id="counter_number" which display the remaining chars.


3. JavaScript Code
Copy and paste the following code after MooTools link (see step 1) in the tag <head>:

<script type="text/javascript">
window.addEvent('domready', function() {
$('myInput').addEvent('keyup', function() {
max_chars = 20;
/* get the current value of the input field */
current_value = $('myInput').value;
/* get current value lenght */
current_length = current_value.length;
/* calculate remaining chars */
remaining_chars = max_chars-current_length;
$('counter_number').innerHTML = remaining_chars;
});
});
</script>

If you want, with some lines of additional code, you can change the counter text color for example from gray to red when remaining chars are less then 6:



This is the code:

<script type="text/javascript">
window.addEvent('domready', function() {
$('myInput').addEvent('keyup', function() {
max_chars = 20;
/* get the current value of the input field */
current_value = $('myInput').value;
/* get current value lenght */
current_length = current_value.length;
/* calculate remaining chars */
remaining_chars = max_chars-current_length;
$('counter_number').innerHTML = remaining_chars;

/* Change color if remaining chars are LT 6*/
if(remaining_chars<=5){
$('counter_number').setStyle('color', '#990000');
} else {
$('counter_number').setStyle
('color', '#666666');
}
});
});
</script>

I added an if statement which checks the value of remaining_chars var. If this value is less then 6, this script change the counter text color to the value #99000, else to #666666.

Naturally this is only a very simple example which helps all MooTools newbie to learn the framework bases.

For questions please add a comment!

Download this tutorial


 
Useful tips to enrich your HTML FormsLesson 1 - Basic Tips for Web Designer

blog comments powered by Disqus
webexpert said...

Great post. Thanks for sharing. The new template is beautiful and really clean to read.

Matt said...

Hey Antonio, loved the post! You do a great job presenting useful tutorials in bite-size fashion that won't scare people away.

tonio said...

A more "mootools way" to do it would have been :

$('counter_number').set('text',remaining_chars);

Nice work anyway. :)

Xinc said...

Nice post, Would you be doing Part 2 of that Creating Application tutorial that you posted a week back...?

Thanks again.

editor, the scitech journal said...

Man, this is too complicated for me. But lately I have been leaning so many things from yours and Amanda's blog. Never knew I could do so much with my blog. It looks beautiful now. Waiting on you to release your template.. :)

DKumar said...

Useful post.

thanks for sharing knowledge on mootools as i also inspired by moo effects.

Thanks

Luca said...

Great Tutorial, as allways! i also love your blogger template!

nasal said...

Nice post!

I wanted to tell you that the link for the second lesson is not working in this tutorial (at the bottom).

Keep up the great woork!

Suparna said...

Thank you for sharing these 3 nice tutorials about "Moo Tools". Great job.

Monkeytail said...

How would you prevent extra chars showing up after char-limit is reached in textarea element?

Anonymous said...

Preventing extra text:
if (current_length > max_chars) {
$('myInput').setProperty('value', $('myInput').getProperty('value').substr(0,max_chars));
}

web design said...

thanks for the info.

Lalita said...

hi ya, this is the first time i have came across this site, while searching for mootools, i really liked first lesson and the third part, but for the second part, the link seems broken, can you please update that!!!

Thanks,

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News