set focus to input box

Question

I have the existing code:

 <form action="page.php?id=<?= $_GET['id'] ?>" method="post">
            <fieldset>
                <p id="edit_name"><label for="name">Page Name:</label><input type="text" name="name" value="<?PHP echo htmlspecialchars_decode($s->name);?>" id="name"> <input type="submit" src="../img/button_save.jpg" name="btnSubmit" value="Save" id="btnSubmit" class="submit"></p>
                <div id="show_name"<?= $_GET['edit'] ? ' style=" display: none"' : '' ?>><p><label for="name">Page Name:</label> <?PHP echo $s->name;?> &nbsp;&nbsp;<a href="?id=<?= $_GET['id'] ?>&edit_name=1" onClick="$('edit_name').show(); $('show_name').hide(); return false;"><img style="vertical-align: top;" src="../img/button_change.png" alt="Change Name"></a></p></div>
                <?
                // for non-JS browsers
                if(!$_GET['edit']) {
                    ?>
                <script type="text/javascript">
                    $('edit_name').hide();
                </script>
                    <?
                }
                ?>
            </fieldset>
        </form> 

I want to also set focus to the input box on clicking change. Currently it just shows/hides upon clicking change.

Thanks!

Answer 1

As suggested in one of the answers make the click handler unobstrusive. Use the following code to focus the text box.

$(function(){
    $("id^=show_name a").click(function(){
        $('edit_name').show(); 
        $('show_name').hide(); 
        $("#name").focus();
        return false;
    });
});

Your HTML/PHP should now look like below:

 <form action="page.php?id=<?= $_GET['id'] ?>" method="post">
    <fieldset>
            <p id="edit_name"><label for="name">Page Name:</label><input type="text" name="name" value="<?PHP echo htmlspecialchars_decode($s->name);?>" id="name"> <input type="submit" src="../img/button_save.jpg" name="btnSubmit" value="Save" id="btnSubmit" class="submit"></p>
            <div id="show_name"<?= $_GET['edit'] ? ' style=" display: none"' : '' ?>><p><label for="name">Page Name:</label> <?PHP echo $s->name;?> &nbsp;&nbsp;<a href="?id=<?= $_GET['id'] ?>&edit_name=1"><img style="vertical-align: top;" src="../img/button_change.png" alt="Change Name"></a></p></div>
            <?
            // for non-JS browsers
            if(!$_GET['edit']) {
                ?>
            <script type="text/javascript">
                $('edit_name').hide();
            </script>
                <?
            }
            ?>
    </fieldset>
</form> 

Answer 2

You can use:

$("#inputid").focus();

If you add that to the event that handles the displaying of the form (or add it to a document ready function such as

$(function(){
  $("#inputid").focus();
});

) it will also work on page load instead.