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):

_{(source: shipit.se)}

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

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

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