Put focus inside a textarea with variable name using javascript

Question

I have a site that lists several upcoming events, and each event has a comment button to leave comments. It looks like this (it's in swedish, but I think you can figure out the structure):

The div containing the textarea for writing the comment is initially hidden, and when clicking the 'comment'-icon it is displayed using the following javascript:

<script language="javascript" type='text/javascript'>
 function showhide_comment(comment_id, change_id) {
  if (document.getElementById(comment_id).style.display == 'none') { 
   if (document.getElementById(change_id).style.display == 'block') {
    document.getElementById(change_id).style.display = 'none';
    document.getElementById(comment_id).style.display = 'block';
    document.getElementById(change_id).style.display = 'block';
   } else {
    document.getElementById(comment_id).style.display = 'block';
   }
  } else {
   if (document.getElementById(change_id).style.display == 'block') {
    document.getElementById(change_id).style.display = 'none';
    document.getElementById(comment_id).style.display = 'none';
    document.getElementById(change_id).style.display = 'block';
   } else {
    document.getElementById(comment_id).style.display = 'none';
   }
  } 
 }

The script contains a hack to display the hidden div correctly in IE when another (initially hidden) div is also displayed in which changes can be made to the event. But never mind that.

The php-code to display the comment form looks like this:

//Comment form, initially hidden
   echo "<div id=\"comment" . $row->id . "\" class=\"submit-comment\" style=\"display: none\">";
   echo "<form name=\"make_comment\" method=\"post\" action=\"submit_comment.php\">";
   echo "Kommentar:<br/>";
   echo "<textarea name=\"comment\" class=\"comment\" rows=\"0\" cols=\"0\"></textarea><br/>";
   echo "<input type=\"hidden\" name=\"event_id\" value=\"$row->id\"/>";
   echo "<input class=\"comment\" type=\"submit\" name=\"submit_comment\" value=\"Skicka\" />";
   echo "</form>";
   echo "</div>";

This code lies inside a loop which displays all upcoming events that are stored in a mySQL database. As can be seen, the divs are given variable names like comment1, comment2, etc. in order to bind the comments to the correct event.

This is the code to display the comment-icon and linking it to the javascript:

echo "<li class=\"icon-left\">
   <a href=\"javascript:showhide_comment('comment" . $row->id . "', 'change" . $row->id . "')\">
   <img src=\"images/comment-24x24.png\" title=\"Kommentera körning\" alt=\"Kommentera körning\" />
   </a></li>";

What I would like to do is to put the focus inside the correct textarea field that becomes visible when the comment-icon is clicked so that the user can start typing directly. I have tried to modify the javascript above using focus(), but I just can't get it to work. Any ideas on how I can achieve what I want?

Thanks.

/Linus

Answer 1

In your javascript function for showing the form:

 if (document.getElementById(comment_id).style.display == 'none') { 
                        if (document.getElementById(change_id).style.display == 'block') {
                                document.getElementById(change_id).style.display = 'none';
                                document.getElementById(comment_id).style.display = 'block';
                                document.getElementById(change_id).style.display = 'block';
                                document.getElementById(comment_id).focus(); //This will set the focus

I'm guessing here that comment_id will be the id to the textarea for the comment. If not, in document.getElementById(); used the id of the textarea in the last line.

Answer 2

This will focus the first textarea in the div, which is what you want:

document.getElementById(comment_id).getElementsByTagName('textarea')[0].focus();

Answer 3

I recommend you to start using JQuery or Dojo Javascript frameworks.
They will make your life much easier. It makes DOM manipulation very easy, fast, less verbose and even more flexible.
That way you won't have so much trouble with simple things.
I use Dojo myself a lot. It's really great.