Focusing a textarea

Question

Int he below code a textarea is added 6 times and initially the textarea conatins the text Enter Text. My question is, if the user enters data in first and third textareas. How to give alert to the user saying that the "textareas are empty" this is a general message but focus on the 2nd textarea and when the user enters data in 2nd the next textarea should be focused.

 <script>  
 function ad_R(count)
 {
  //Adding and populating table row 
  var row = '<tr>';
  row += '<td>';
  row += '<textarea rows = "8" cols = "18" border ="0" class="input" style="border:none;overflow:visible;width:100%;" id="details'+count+'" nfocus="if (this.value == \'Enter text\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'Enter text\';" name ="detail'+count+'" class="row_details'+r_count+'">Enter text</textarea></td></tr>';
  }

  $(document).ready(function() {
   cnt += '<table cellspacing="0" cellpadding="0" border="1" width="100%" id="_table">';
   cnt += '<tr>';
   cnt += '<th width="30%">Category</th>';
   cnt += '</tr>';
   for(var i=0;i<6;i++)
   {
      cnt += add_R(6);
     }
    cnt += '</table>';

   });

Answer 1

There's a bit missing for that snippet to "compile" (some apparent globals cnt and r_count), and is the function ad_R or add_R?
The function doesn't return anything either, so the += of its return value in the document-ready function won't work so well.
I guess also you want to send in the index count (i) and not hardecoded number 6 when you call the function? And, when you're building the HTML string for a textarea there's an attribute "nfocus" that might very well be meant to be "onfocus".

Besides this, is the goal to somehow make the user enter text in the areas in a specific order? Ie, don't fill in 2 before 1, 3 before 2 and so on?

Answer 2

In general, you should get rid of those inline handlers like "onblur=".

Use jQuery for all those events instead. For Instance

$('textarea').bind('focusout', function(e){
   if($(this).val() == "")
      alert('Textarea ' + this.id + ' is empty');
});

I'm afraid I didn't fully understand what you are trying to do further, but I'm sure you can manage all your needs with some handlers.

$('textarea').bind('keydown', function(e){
   var $next = $(this).next('textarea');
   if($next) $next.focus();
});

would jump to the next textarea (even if I wouldn't know why)

edit since you are adding those textareas onthefly, you maybe should use .live() or even better .delegate() to bind those event handlers.

Kind Regards

--Andy

Answer 3

It's very annoying for a user to have an input form behave like you're describing. It's better to do the textarea validation after a user action, like a button click. Those actions implicate that the user assumes that he/she is done with their input, which is an excellent moment to perform validation.

Here's a sample piece of validation code, which displays an alert for the missing text area input and gives it focus after the message:

$(document).ready(function() {
    $("#buttonid").click(function() {
        for (var i = 0; i < 6; i++) {
            if ($("#details" + i).val() == "") {
                alert("You are missing some input!");
                $("#details" + i).focus();
                return false;
            }
        }
        return true;
    });
}