loop through all tr and validate controls inside td in jquery

Question

i have a table whose structure is

<table>
    <tr>
        <td>
            <input type="text" id="field_1" />
            <input type="text" id="field_2" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" id="field_1" />
            <input type="text" id="field_2" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" id="field_1" />
            <input type="text" id="field_2" />
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</table>​

i like to loop through all the tr and check if field_1 and field_2 are empty .

My sample code

$('#table-1 tr').each(function () {
    var title = $(this).find("input[id*='field_1']");
    var link = $(this).find("input[id*='field_2']");
    if (title.value == '' || link.value == '') {
        alert("empty");
    }
});

This gives undefined for both link and title !!

Answer 1

First, you need to change your IDs to classes, since you can not reuse IDs on a page. They must be unique.

The main trouble with your code is that you are trying to use .value against a jQuery object.

You need .val() to get the value of the <input> from the jQuery object, as in title.val().

Or to use the .value property directly, you need to get the DOM element out of the jQuery object first, as in title[0].value.

$('#table-1 tr').each(function() {
      var title = $(this).find("input[id*='field_1']");
      var link = $(this).find("input[id*='field_2']");

      if(title[0].value=='' || link[0].value=='') {
          alert("empty");
      }
});