Setting the focus to the next input in jQuery?

Question

Hi guys,

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 1

I think that your problem might be that it's not possible to set the focus to a disabled input control (at least in some browsers/operating systems).

Your focus() call is basically in the wrong block - it should be in the else block, not the if block.

Like this:

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

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

Answer 2

Modified of the above answer with cached this jq object. Also the filter inside next is not needed. next() will only ever return the next sibling. The filter is basically saying get me the next only if it is an input or whatever filter you give. If you are sure the next is the desired object there is no need to include the filter.

$("#assessed select").change(function () {
    var $this = $(this);
    if( $this.val() === 'null') {
        $this.next()
             .attr("disabled", true);
    }
    else {
        $this.next()
             .removeAttr("disabled")
             .focus();
    }
});