Question

I have 7 dropdown with the class name=”dd”. and i have 7 textbox with the class name =”tt”. each text box corresponds to each dropdown.
now, i have to check

if(dropdown value is equal to 1)
    text box can not be empty.

so to do this what i am doing:

function checkOpenHours() {
        if ($('.dd').val() == 1 && $('.tt').val() == "") {

                alert("Please select an opening hour.");
                return false;

        }
    }

and i am calling this function like

<asp:Button ID="btnSave" runat="server" Text="Update hour" Height="35px" 
        onclick="btnSave_Click" OnClientClick="return checkOpenHours()"/>

BUT The problem is, this only works for the first dropdown and textbox.
It does not work for the other 6 dropdown and textbox ..!!

what am i doing wrong?? any help?

Answer 1

The .val() method returns the value from the first element in the jQuery object.

You could do this instead:

function checkOpenHours() {
    var $dd = $('.dd'),
        $tt = $('.tt'),
        i;

    for (i = 0; i < $dd.length; i++) {
        if ($dd.eq(i).val() == 1 && $tt.eq(i).val() == "") {
            alert("Please select an opening hour.");
            return false;
        }
    }
}

What I’m doing there is first putting the result of $('.dd') and $('.tt') into variables, because although using $('.dd') and $('.tt') in the loop would work it would be inefficient because it would recreate them (complete with DOM access) on every iteration. Then I’m using the .eq() method to get the elements at the current i index.

I’m using a standard for rather than a jQuery .each() because it makes it easy to return from the outer function.