Friday, March 27, 2015

Html form tabindex enter press control by Jquery

Html form tabindex control by Jquery, follow below code: 
*note: this below code actually a hint, programmers can understand how to use it:

<form id="form1" name="form1" action="saver.php" method="post">
        <label>Name:</label>
        <input name="name" value="" tabindex="1">
        <label>Roll:</label>
        <input name="roll" value="" tabindex="2">
        <label>Address:</label>
        <input name="address" value="" tabindex="3">
        <label>Phone:</label>
        <input name="phone" value="" tabindex="4">
        <label>Email:</label>
        <input name="email" value="" tabindex="5">
        <input type="submit" tabindex="6">

    </form>
----------------------------------------------------------------------------------------------
<script>
    $(document).ready(function () {
        $("#form1 input:first").focus();
        $('#form1').on('keydown', 'input', function (event) {
            if (event.which == 13) {            
                var $this = $(event.target);
                var index = parseFloat($this.attr('tabindex'));
                $('[tabindex="' + (index + 1).toString() + '"]').focus();
                if (index == 6) {
                    return true;
                }
                return false;
            }
        });
    });
</script>

No comments:

Post a Comment

Change priority of dual boot OS

Change priority of dual boot OS  (Windows and Linux): Go to your Linux OS, install Grub customizer. Then change priority by up and down arro...