Setting the focus to the next input in jQuery?

Nick picture Nick · Aug 5, 2009 · Viewed 33.1k times · Source

I've currently got a script that'll check for the value of a select box, and then enable a text field right next to it, and then hopefully set focus.

I have this at the moment which works fine at enabling the input field...

$("#assessed select").change(function () {

    if($(this).val() == 'null') { $(this).next('input').attr("disabled", true);  }
    else { $(this).next('input').removeAttr("disabled"); }

});

I'm a bit stuck on the 'focus' bit to be honest, I tried "$(this).next('input').focus();" but that didn't focus at all, although it didn't bring up a Javascript error either...

$("#assessed select").change(function () {

    if($(this).val() == 'null') { $(this).next('input').attr("disabled", true); $(this).next('input').focus(); }
    else { $(this).next('input').removeAttr("disabled"); }

});

Any ideas please guys? I'm really stuck on this and it'd be a very simple, but very useful addition to the page I'm building!

Thanks

Answer

TimoSolo picture TimoSolo · Jan 5, 2011

Also found a nice little plugin to get the next input: http://jqueryminute.com/set-focus-to-the-next-input-field-with-jquery/

$.fn.focusNextInputField = function() {
    return this.each(function() {
        var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select').not(':hidden');
        var index = fields.index( this );
        if ( index > -1 && ( index + 1 ) < fields.length ) {
            fields.eq( index + 1 ).focus();
        }
        else {fields.first().focus();}
        return false;
    });
};