For a textbox, character of a field can easily be limited with maxlength attribute. But maxlength doesn’t work for  a textarea. So, It needs an alternate way. For one of my project, I wrote a function for this purpose where I used jQuery. Here I am explaining how I did it.

Let’s look an example of this interactive solution here. 

OK. Now we will make this in 2 easy steps.

1. Import your jQuery file and write the function "limitChars(textid, limit, infodiv)" in the head section of your page.

This function takes 3 parameters. They are:

• textid : (string) The ID of your textarea.
• limit : (num) The number of character you allow to write.
• infodiv : (string) The ID of a div, in which limit information will be shown .

  Here is the function:

 1: <script language="javascript" src="Jquery.js"></script>

 2: <script language="javascript">

 3: function limitChars(textid, limit, infodiv)

 4: {

 5: var text = $(‘#’+textid).val(); 

 6: var textlength = text.length;

 7: if(textlength > limit)

 8: {

 9: $(‘#’ + infodiv).html(‘You cannot write more then ‘+limit+‘ characters!’);

 10: $(‘#’+textid).val(text.substr(0,limit));

 11: return false;

 12: }

 13: else

 14: {

 15: $(‘#’ + infodiv).html(‘You have ‘+ (limit - textlength) +‘ characters left.’);

 16: return true;

 17: }

 18: }

 19: </script>

 1: $(function(){

 2: $(‘#comment’).keyup(function(){

 3: limitChars(‘comment’, 20, ‘charlimitinfo’);

 4: })

 5: });

 1: function limitChars(textarea, limit, infodiv)

 2: {

 3: var text = textarea.value; 

 4: var textlength = text.length;

 5: var info = document.getElementById(infodiv);

 6:  

 7: if(textlength > limit)

 8: {

 9: info.innerHTML = ‘You cannot write more then ‘+limit+‘ characters!’;

 10: textarea.value = text.substr(0,limit);

 11: return false;

 12: }

 13: else

 14: {

 15: info.innerHTML = ‘You have ‘+ (limit - textlength) +‘ characters left.’;

 16: return true;

 17: }

 18: }

 1: <textarea name="comment" id="comment" onkeyup="limitChars(this, 20, ‘charlimitinfo’)">

 2: </textarea>

Please let me know if you have an idea to make it better. 

Thank you all. Thanx for using, commenting and visiting my script jQuery controlled Dependent (or Cascading) Select List from my old bolg http://php4bd.wordpress.com and here.

I am getting a lots of request and questions from visitors about adding some features and some other problems. Sometimes I faced some problem when using this script myself. So, I have made some changes here. I hope, this change will help you to overcome some problems of previous version of this script. The main features added in this version are:

1. It will keep in child list box only sub items of selected parent value when initializing.
2. Added a 4th parameter to input a selected value for child list box.
3. When "isSubselectOptional" is true, add a default value ‘none’ for ‘– Select –’ option of child list box.
4. Automatically focus the child list box when a value is selected from parent list box.
5. More effective for multilevel association.

Click here to see a demo of multilevel association using this function.

Here is the modified function:

 1: function makeSublist(parent,child,isSubselectOptional,childVal)

 2: {

 3: $("body").append("<select style=’display:none’ id=’"+parent+child+"’></select>");

 4: $(‘#’+parent+child).html($("#"+child+" option"));

 5: 

 6: var parentValue = $(‘#’+parent).attr(‘value’);

 7: $(‘#’+child).html($("#"+parent+child+" .sub_"+parentValue).clone());

 8: 

 9: childVal = (typeof childVal == "undefined")? "" : childVal ;

 10: $("#"+child+‘ option[@value="’+ childVal +‘"]’).attr(’selected’,’selected’);

 11: 

 12: $(‘#’+parent).change( 

 13: function()

 14: {

 15: var parentValue = $(‘#’+parent).attr(‘value’);

 16: $(‘#’+child).html($("#"+parent+child+" .sub_"+parentValue).clone());

 17: if(isSubselectOptional) 

 18: $(‘#’+child).prepend("<option value=’none’> — Select — </option>");

 19: $(‘#’+child).trigger("change"); 

 20: $(‘#’+child).focus();

 21: }

 22: );

 23: }

And initialize the association on ‘$(document).ready’, as following example:

 1: $(document).ready(function()

 2: {

 3: makeSublist(’parentID’,‘childID’, true, ‘selected_val_of_child’);

 4: });

If you want to create multilevel association, start the initialization from child most order. such as:

 1: $(document).ready(function()

 2: {

 3: makeSublist(‘child’,‘grandson’, true, ”); 

 4: makeSublist(‘parent’,‘child’, false, ‘3′); 

 5: });

For details instruction and example of using this script, please visit the previous version. Feel free to ask me if any problem with using this script or any bug you found.

When I was searching the web for a client side dependent list boxes, I got some scripts. But some of them were very much static (static select name, option name etc.), some were vary complex. Then I thought to make it myself.
I have been using jQuery as the standard JavaScript library for most of my web project for some days. Writing javascript coding in jQuery is fun. So here goes my contribution using it.

Here is a simple demo.

Let me guide you through it.

1. Include jqury.js.

<script language=”javascript” src=”jquery.js”></script>

You can get Jquery from here.

2. Write this simple function in a javascript block in head.

function makeSublist(parent,child,isSubselectOptional)
{
$(”body”).append(”<select style=’display:none’ id=’”+parent+child+”‘></select>”);
$(’#'+parent+child).html($(”#”+child+” option”));
$(’#'+child).html(”<option> — </option>”);
$(’#'+parent).change(
function()
{
var parentValue = $(’#'+parent).attr(’value’);
$(’#'+child).html($(”#”+parent+child+” .sub_”+parentValue).clone());
if(isSubselectOptional) $(’#'+child).prepend(”<option> — Select — </option>”);
}
);
}

This function takes 3 arguments: the parent select input’s id, the child select input’s id, and a boolean value to indicate whether to select an item from child list by default.

Example: makeSublist(’listA’,'listB’,false);

This function will make the options of ‘listB’ list depending on the selection of ‘listA’. And user have to select an item from ‘listB’.
Here ‘listA’ and ‘listB’ are the IDs of parent and child select input respectively.

3. Add a class to the ‘<option>’s of the child list box. The class name will be the value of it’s parent ‘<option>’ in parent listbox with a ’sub_’ prefix.
Suppose, in parent listbox there is an item “Flower”. Its value is ‘fl’:

<option value=’fl’>Flower</option>

When the item “Flower” will be selected, only 3 items should be visible in child listbox. These 3 items should hold the class name ’sub_fl’:

<option class=”sub_fl” value=”1″>Rose</option>
<option class=”sub_fl” value=”2″>Sunflower</option>
<option class=”sub_fl” value=”3″>Orchid</option>

4. Now you are ready. On ‘$(document).ready’ event of Jquery, run the function to associate your list boxes.

$(document).ready(function()
{
makeSublist(’parentID’,'childID’, false);
});

5. Enjoy