Question

I have several select boxes and textboxes with the same class and I have the following statement.
UPDATED

//This goes through each visible tr of the table with class notEmptyTable
$('.notEmptyTable tr:visible').each(function(index) {

    //This checks that the elements with class checkTextBox1IsNotEmpty its not Empty.
    if ($('.checkTextBox1IsNotEmpty ').val() != "") {
        if ($('.selTxtClass:visible').val() == "") {
            $('.selTxtClass:visible').focus();
        }
    }    
});

UPDATE HTML

<table>
    <tr>
      <td><input type="text" id="txtBoxa1" class="checkTextBox1IsNotEmpty"/></td>
      <td><input type="text" id="txtBoxb1" /></td>
      <td><select id="selc1" class="selTxtClass" onchange="javascript:if (this.value = "other")txtBoxd1.style.display = 'block'"/>
          <input id="txtBoxd1" style="display:none;" class="selTxtClass"/>
      </td>
    </tr>

    <tr>
      <td><input type="text" id="txtBoxa1" class="checkTextBox1IsNotEmpty"/></td>
      <td><input type="text" id="txtBoxb1" /></td>
      <td><select id="selc1" class="selTxtClass" onchange="javascript:if (this.value = "other")txtBoxd1.style.display = 'block'"/>
        <input id="txtBoxd1" style="display:none;" class="selTxtClass"/>
      </td>
    </tr>

    <tr>
      <td><input type="text" id="txtBoxa1" class="checkTextBox1IsNotEmpty"/></td>
      <td><input type="text" id="txtBoxb1" /></td>
      <td><select id="selc1" class="selTxtClass" onchange="javascript:if (this.value = "other")txtBoxd1.style.display = 'block'"/>
        <input id="txtBoxd1" style="display:none;" class="selTxtClass"/>
      </td>
    </tr>

 </table>

If I do an alert with ($(‘.selTxtClass:visible’).val()) it comes as undefined.

I want to check that the value of these elements are empty, but I cant see what is wrong with this if statement, could you give me a hand, please?

Thanks a lot.

Answer 1

I assume this is part of a larger loop, currently though you’re checking all elements with those classes, not the ones just in that row, adjust it giving the $() consutrctor a context , the row in this case, like this:

$('.notEmptyTable tr:visible').each(function(index) {
    //Other loop stuff
    if ($('.checkTextBox1IsNotEmpty', this).val() != "") {
        if ($('.selTxtClass:visible', this).val() == "") {
            $('.selTxtClass:visible', this).focus();
        }
    }    
});

This checks the class="checkTextBox1IsNotEmpty" for the current row, which I believe is what you’re after…if not just ignore this useless answer 🙂 Also, not directly related to the question, but don’t use the same ID multiple times, what you have in invalid HTML and may lead to many other side-effects.