I have the following code that assigns tabindex to my form id "register1". I would like to place the cursor on the first input or select list item on the form (item with tabindex = 1) once tabindexes are assigned. but the following line: $('#register1').find('input').attr('tabindex',1).select(); Resets tabindex of all the inputs.

Full code:

$(function(){
    var tabindex = 1;
    $('#register1').find('input,select').each(function() {
        if (this.type != "hidden") {
            var $input = $(this);
            $input.attr("tabindex", tabindex);
            tabindex++;
        }
    });
    $('#register1').find('input').attr('tabindex',1).select();
});

thanks

I have the following code that assigns tabindex to my form id "register1". I would like to place the cursor on the first input or select list item on the form (item with tabindex = 1) once tabindexes are assigned. but the following line: $('#register1').find('input').attr('tabindex',1).select(); Resets tabindex of all the inputs.

Full code:

$(function(){
    var tabindex = 1;
    $('#register1').find('input,select').each(function() {
        if (this.type != "hidden") {
            var $input = $(this);
            $input.attr("tabindex", tabindex);
            tabindex++;
        }
    });
    $('#register1').find('input').attr('tabindex',1).select();
});

thanks

• javascript
• jquery
• jquery-ui
• jquery-plugins
• jquery-selectors

2 Answers 2

Try :

$('#register1').find('input[tabindex=1]').whatyouwant()

Simply select the item with tabindex one in your loop using a condition:

$(function(){
    var tabindex = 1;
    $('#register1').find('input,select').each(function() {
        if (this.type != "hidden") {
            var $input = $(this);
            $input.attr("tabindex", tabindex);

            // select the first one.
            if (tabindex == 1) {
               $input.select();
            }
            tabindex++;
        }
    });
});