7

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

Jonas
  • 121,568
  • 97
  • 310
  • 388
Nick
  • 1,233
  • 13
  • 26
  • 37

3 Answers3

16

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;
    });
};
TimoSolo
  • 7,068
  • 5
  • 34
  • 50
  • 4
    I would add `.not(':hidden')` to the fields declaration, so only visible elements are selected. Also, add `else {fields.first().focus();}` to get the focus to wrap around to the first element. – Collin K Nov 26 '11 at 00:35
  • Why do you looks for parents form:eq(0) first? – Serge Nov 06 '13 at 15:49
  • @Serge it selects the parent form that the input element is in. I dont know if the "eq(0)" is necessary, not my code tho, so I'm not sure. – TimoSolo Nov 07 '13 at 08:26
  • Good idea @CollinK - I've added it in – TimoSolo Nov 07 '13 at 08:29
  • 1
    I would also add a `.not(':disabled')` to the fields declaration, so only non-disabled elements are selected. – Kim Rasmussen Mar 01 '19 at 10:50
5

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();
    }
});
redsquare
  • 78,161
  • 20
  • 151
  • 159
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(); }
});
Rob Knight
  • 8,624
  • 1
  • 20
  • 11
  • Hah! Many thanks Rob... I just realised I put the focus into the 'if' and not the 'else'! Absolute schoolboy error, sorry and many thanks - wasn't until you posted that I realised :) – Nick Aug 05 '09 at 10:36
  • Remember to cache the $(this) rather than calling it multiple times – redsquare Aug 05 '09 at 10:42