Jquery each loop not working for text inputs

Question

Hi I am trying make a search button active/inactive based on whether the user has entered text into BOTH textboxes. Currently it is becoming active when the user enters text on only the first box. Can anyone please tell me what I am doing wrong?? Thanks in advance!

$(".searchBtn.active").hide();
$(".searchBtn.inactive").prop('disabled', true);

$.each($(".searchFormContent input[type=text]"), function () {
     $(this).keyup(function () {
         if ($(this).val().length > 0) {
             $(".searchBtn.inactive").hide();
             $(".searchBtn.active").show();
         } else {
             $(".searchBtn.active").hide();
             $(".searchBtn.inactive").show();
         }
     });
});

I have now tried this:

$(".searchFormContent input[type=text]").each(function () {
            $(this).keyup(function () {
                if ($(this).val().length > 0) {
                    $(".searchBtn.inactive").hide();
                    $(".searchBtn.active").show();
                } else {
                    $(".searchBtn.active").hide();
                    $(".searchBtn.inactive").show();
                }
            })
        });

and this:

$(".searchFormContent input[type=text]").keyup(function () { if ($(this).val().length > 0) { $(".searchBtn.inactive").hide(); $(".searchBtn.active").show(); } else { $(".searchBtn.active").hide(); $(".searchBtn.inactive").show(); } });

Getting the same result every time.

Barmar · Accepted Answer · 2014-06-20 16:34:31Z

2

When looping over the results of a selector, use the method syntax:

$(".searchFormContent input[type=text]").each(...);

The syntax you used is for looping over an array or object.

See the following documentation:

However, you don't need to use .each() when binding event handlers, the event handler methods operate on a selector directly:

$(".searchFormContent input[type=text]").keyup(function() ...);

To solve the problem you're having, you need to loop inside the event handler:

$(".searchFormContent input[type=text]").keyup(function() {
    var allFilled = true;
    $(".searchFormContent input[type=text]").each(function() {
        if (this.value == '') {
            allFilled = false;
            return false; // End the loop
        }
    });
    $(".searchBtn.inactive").toggle(!allFilled);
    $(".searchBtn.active").toggle(allFilled);
});

edited Jun 20, 2014 at 16:34

answered Jun 20, 2014 at 16:26

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

TreeTree Over a year ago

You missed a double quote, I couldn't edit just one character.

user3022992 Over a year ago

Thank you for the input but that doesn't fix the problem.

user3022992 Over a year ago

I am getting the same result with or without the .each

Barmar Over a year ago

That's because you're only testing the current input in your event handler. I've added code that loops over all the inputs to the answer.

user3022992 Over a year ago

WOW thank you so much for the quick responses, your code works perfectly!

Collectives™ on Stack Overflow

Jquery each loop not working for text inputs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related