Question

I have 5 div tags with the same class. Each div tag has a textbox and a dropdownlist with numbers.

How can I check if all these div tags’ textboxes and dropdownlists are empty or not and if it is “do something”.

$step is an array with all of my div tags.

var $step = $(".wizard-step2:visible");

My Textbox have a class Comment and my Dropdownlist have a class Grade.

I have coded this so far but its wrong, I dont want it to check on each div tag, I want it to check all of them.

This is the code that is wrong:

var Comment = $step.find(".Comment").val();
var Grade = $step.find(".Grade").val();

for (var i = 0; i < $step.length; i++) {
    if (Comment != null && Grade > 0) { {
        // do this
    }
    } else {
        alert("You must enter both fields");
    }
}

EDIT:

I think that I did not explain my question well, my code works like all of the answers I got on this question. I dont want to make this if statement to check each div tag. I want to be able to check if all of the div tags have any empty fields do something ” else if all the div tags fields are filled do something.

Users are allowed to leave the fields empty, but if all of the div tags fields are filled do something.

I do not want to do a if statement for each div tag, I want to do a if statement if all the div tags have any empty fields or if all are field.

Lets say I have 5 div tags. I have filled 4 of them and when I filled the last one 5 div tags are filled. Here I want this ” do something “, else nothing should happen. I dont want the if statements to be executed on div tag 1, 2, 3, 4 that are filled I want the if statement to happen when the 5th is filled beacuse then all the div tags are filled else nothing should happen

Answer 1

Find the filled elements of each class, and use the length of the resulting selections to perform your tests:

var $step = $(".wizard-step2:visible");

// returns true if the element's value is not null
function filled() {
    return !!this.value;
}

// count the number of non-empty elements
var n_step     = $step.length; 
var n_comments = $step.find('.Comment').filter(filled).length;
var n_grades   = $step.find('.Grade'  ).filter(filled).length;

if (n_comments === n_step && n_grades === n_step) {
     // all filled
} else if (n_comments === 0 && n_grades === 0) {
     // all empty
} else {
     // mixed - do nothing
}