javascript - Autofocus on the first empty field in the form - Stack Overflow

I am trying to achieve AutoFocus functionality on the first empty form field which can be an input element or any kind i.e.

1. textbox
2. radio button
3. Select
4. checkbox

I have had a look at the jquery website and tried using the :input selector but I am unable to achieve Autofocus on any input field other than text box. I have also setup a JS Fiddle,

Fiddle for code

Can somebody help here?

I am trying to achieve AutoFocus functionality on the first empty form field which can be an input element or any kind i.e.

1. textbox
2. radio button
3. Select
4. checkbox

I have had a look at the jquery website and tried using the :input selector but I am unable to achieve Autofocus on any input field other than text box. I have also setup a JS Fiddle,

Fiddle for code

Can somebody help here?

• javascript
• jquery
• html
• model-view-controller
• autofocus

Share Improve this question Follow edited Oct 5, 2015 at 13:44 Sunil 9291515 silver badges2525 bronze badges asked Oct 5, 2015 at 12:59 CSharpedCSharped 1,29744 gold badges2121 silver badges5353 bronze badges 1

• Did you even read the question, if that makes sense? – Praveen Kumar Purushothaman Commented Oct 5, 2015 at 13:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You might need to use filter() to find the inputs with empty values:

$(function () {
    $("input:enabled").filter(function () {
        return this.value.trim() == "";
    }).first().focus();
});

This will not work if you are using checkbox. So for that:

$(function () {
    $("input:enabled").filter(function () {
        if ($(this).attr("type") == "checkbox" || $(this).attr("type") == "radio")
            return $(this).val().trim() == "" || !this.checked;
        else
            return this.value.trim() == "";
    }).first().focus();
});

Fiddle: http://jsfiddle/7fwrd2rk/

You need to filter() out the empty/unchecked inputs and set focus to the first element in the matched set, as below.

$(function () {
    $("input:enabled").filter(function () {
        return this.type.match(/checkbox|radio/i) && //when it's a checkbox/radio
               !this.checked || //get me a list of unselected ones
               ($.trim(this.value) === ""); // else get me a list of empty inputs
    }).first().focus(); //grab the first from the list and set focus
});

Here is a demo along the same lines.

This includes textarea and select.