Question

I’m building a table from which I want to update different fields of a database. The current value is output, followed by a submit button and a text field for inputting the new value.

When I input a new value for a certain field, I want the submit button for this text field to get automatically focused, to be able to simply press ENTER to update the database. How is this achieved? I’m thinking it must be possible with simple HTML. Here’s a piece of code:

echo "
<form method='post'>
    <table>
        <tr>
            <th>Amount to receive</th>
            <td>" . mysql_result($result, 0, "amountToReceive") . "</td>" . "
            <td><input type='submit' value='Change' name='btnChangeAmountToReceive'> <input type='text' name='txtChangeAmountToReceive'></td>
        </tr><tr>
            <th>Amount received</th>
            <td>" . mysql_result($result, 0, "amountReceived") . "</td>" . "
            <td><input type='submit' value='Change' name='btnChangeAmountReceived'> <input type='text' name='txtChangeAmountReceived'></td>
        </tr>
    </table>
</form>";

Answer 1

The way to accomplish that is by using javascript, and I’d suggest you using jQuery.

    $('#mytextfield').change(function(e) {
        $('input[type=submit]').focus();
    });

Or you can try jarry’s

<input type="text" onkeypress="return focusOnEnter(event)" /> 
<script type="text/javascript">
function focusOnEnter(e)
{
var keynum = e.keyCode || e.which;  //for compatibility with IE < 9
if(keycode == 13) //13 is the enter char code
    document.getElementsByName('btnChangeAmountReceived')[0].focus();
return true;
}
</script>

You can also autofocus an element on HTML5 by adding the attribute autofocus="autofocus"