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

Filed Under ( CSS, Javascript, Programming, Technology, Tutorial ) by admin on 01-10-2008

Tagged Under : Javascript, mootools, Tips

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 of the page:

&lt;script type="text/javascript" src="mootools.svn.js"&gt;&lt;/script&gt;

2. HTML Code

HTML code for this example is very simple:

&lt;label for="myInput"&gt;Write something here:&lt;/label&gt;
 
  &lt;input type="text" id="myInput" maxlength="20" /&gt; 
 
  &lt;span id="counter_number" class="counter"&gt;20&lt;/span&gt; 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>:

&lt;script type="text/javascript"&gt;
 
  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:

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

Refference: woork

0 Comments