jQuery to get value of textbox

Question

I need to write some jQuery/javascript to do some validation before submitting a form, because I have to check per some very specific results. Per my tests I believe I am accessing the correct row of data as $(this) in my table with my validation tests, however I cannot get the value typed into the text box of the second td of the row. Something is incorrect with:

alert($(this).closest('td').find($("input[name=test]")).val())

which is preventing the jQuery from getting the value typed into the test textbox of the html below.

<tr>
<td>
    <select id="selectId3" name="selectId3" data-val-required="The selectId3 field is required." data-val-number="The field selectId3 must be a number." data-val="true">
        <option value="">-- Select Area --</option>
        <option value="2">2</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="10">10</option>
        <option value="13">13</option>
        <option value="16">16</option>
        <option value="17">17</option>
    </select>
</td>
<td>
    <span style="label2">
        <input id="test" type="text" value="" name="test">
    </span>
</td>
<td>   </td>

$('#myForm').submit(function () {
    $("select").each(function () {
        if (($(this).val() != '') && ($(this).val() != '-- Select Area --')) {
            alert($(this).closest('td').find($("input[name=test]")).val());
        }
    });
    return false;
});

If anyone can describe the correct jQuery to get the textbox value I would greatly appreciate it.

Thanks in advance.

Answer 1

closest() travels up the DOM tree, not down, so if $(this) equals the current row, you will never find the td tags inside it using closest('td').

Assuming that you can't simply use the id attribute to access the input directly, as Jamie suggested, you would need to use:

$(this).children("td:eq(0)");

. . . to get the first td of the row, assuming that $(this) references the row that you want. To access the value of the select inside it, use:

$(this).children("td:eq(0)").find("select").val();

EDIT: Actually, given your code, there are a whol bunch of ways that you could access the value of that select element, but it's hard to tell which would be the most efficient without seeing the rest of the code, to know the context of the logic.

UPDATE: Based on your comments below, try this for your code:

$(this).closest("tr").children("td:eq(0)").find("select").val();

. . . or . . .

$(this).closest("tr").children("td:eq(0) select").val();

(the first one is faster)

Answer 2

Access it by id?

$("#test").val();

The # in this example means find an element by its id (jQuery docs)

Answer 3

 var textboxvalue= $(this).closest('td:eq(1) input').val();

eq is 0 based, if 1 for then second td,for textbox we use input