Open Modal popup with Autofocus

Question

I've The following Code :

<a href="#openModal"></a>

<div id="openModal" class="modalDialog">
<div>
<a href="" title="" class="close">X</a>

<?php 
//PHP code
//PHP code
//PHP code
//PHP code
echo "<center><b> Employee(s) List </b></center>";
echo "<br />";
for($i=0;$i<$num;$i++){
$row = mysql_fetch_assoc($result);
?>

// I NEED AUTOFOCUS HERE
<center>
<a href="cash_employee.php<?php echo "?name=".$row['name'] ?>" class="emp" ><?php echo ucfirst($row['name']) ?></a>
</center>
// I NEED AUTOFOCUS HERE

<?php   
}

echo "<center><a href='' title='' class='close2' onmousedown='location.reload(home.php);'>Close Window</a></center>";
}
else {
echo "<center>";
echo "<font color='red' size='+3'>Sorry!<br /> No Employee(s) Found </font>";   
echo "</center>";
}
?>
</div>
</div>

Based on the code above, the output will result list of employee names by which you need to use the mouse to hover and click on the employee name to proceed. What i am looking for is to find a way to insert autofocus option in-order to use keyboad arrow (up or down) then clicking enter. I used this method on different code using <input type="button" autofocus="autofocus" > and it works as needed. But when i change the

<a href="cash_employee.php<?php echo "?name=".$row['name'] ?>

to make it look like this

<input type="button" onclick="window.location('cash_employee.php<?php echo "?name=".$row['name'] ?>')" autofocus="autofocus"> it will not work , but the list of employee names are available.

Is there any alternative way of doing it, I'm afraid Open Modal won't support this option ? Please Help Thanks

I'm sorry for my bad english.

Answer 1

If you move your employee list to its own employeelist.php file, then place it in your page like so...

<div id="openModal" class="modalDialog">
   <?php include('employeelist.php'); ?>
</div>

You can then modify your button to the following...

<a id="cashEmployee" href="cash_employee.php<?php echo "?name=".$row['name'] ?>

And then in your modal dialog add...

<script type="text/javascript">
    $(document).ready(function () {
        $('#cashEmployee').focus();
    });
</script>

Answer 2

You can accomplish this effect using following code. (Uses jQuery).

jQuery:

//Add first focus
$("a.active").focus();
$(document).keyup(function(e){
    //Up arrow
    if(e.which == 38){
        var prev = $("a.active");
        //Move focus around
        $("a.active").prev("a.employe").addClass("active").focus();
        prev.removeClass("active");
    }
    //Down arrow
    if(e.which == 40){
        var prev = $("a.active");
        //Move focus around
        $("a.active").next("a.employe").addClass("active").focus();
        prev.removeClass("active");
    }
});

Example html:

<a href="javascript:alert('test1')" class='employe'>Test</a>
<a href="javascript:alert('test2')" class='employe'>Test</a>
<a href="javascript:alert('test3')" class='employe active'>Test</a>
<a href="javascript:alert('test4')"class='employe'>Test</a>

Example fiddle: http://jsfiddle.net/GA756/1/