JSFiddle - React, Tailwind, and code Playground

by vansimke

HTML

<form name="HtmlForm" method="post">
<div>
        Employee Info<br />
        <br />
        Name<br />
        <input name="TxtbxName" type="text" value="ok" id="TxtbxName" tabindex="1" />
        <br />
        <br />
        Age<br />
        <input name="TxtbxAge" type="text" id="TxtbxAge" tabindex="2" />
        <br />
        <br />
        Gender<br />
        <select name="DdlGender" id="DdlGender" tabindex="3">
    <option selected="selected" value="Male">Male</option>
    <option value="Female">Female</option>

</select>
        <br />
        <br />
        <div>
            Previous Employment<br />
            <select name="DdlCompany" id="DdlCompany" tabindex="4">
    <option selected="selected" value="0">Folio3</option>
    <option value="1">Null Soft</option>
    <option value="2">Object Soft</option>
    <option value="3">Excepption Soft</option>

</select>
            &nbsp;&nbsp;or Enter Code&nbsp;&nbsp;
            <input name="TxtbxCompanyCode" type="text" id="TxtbxCompanyCode" tabindex="5" />
            <br />
            <br />
            Address<br />
            <input name="TxtbxAddress" type="text" id="TxtbxAddress" tabindex="6" />
            <br />
            <br />
            <input type="submit" name="BtnSubmit" value="Submit" id="BtnSubmit" tabindex="7" />
            <br />
            <br />
            <label id="Msg">
                Message here</label>
        </div>
    </div>
</form>

JavaScript

var id;
$(document).ready(function(eOuter) {
    $('input').bind('keypress', function(eInner) {
        if (eInner.keyCode == 13) //if its a enter key
        {
            var tabindex = $(this).attr('tabindex');
            tabindex++; //increment tabindex
            $('[tabindex=' + tabindex + ']').focus();

            $('#Msg').text($(this).attr('id') + " tabindex: " + tabindex + " next element: " + $('*').attr('tabindex').id);


            // to cancel out Onenter page postback in asp.net
            return false;
        }
    });
});