Question

I have a form that outputs systems assigned to a project. The systems are looped and new rows can be added dynamically so using ID attribute is not available.

When the user make a change to the status drop down option, I need the associated Status Effect Date field to become required. I don’t know how to traverse the DOM well enough to locate the field with a class of datepicker.

<tr>  
    <th class="form">
        <label>Status</label>
    </th>  
    <td>
        <div style="float:left;">  
        <select class='status' name="status" >  
            <option value="New">New</option>  
            <option value="Existing">Existing</option>  
            and so on...  
        </select>  
        </div>
    </td>  
    <th class="form">
        <label>Status Eff. Date</label>
    </th>  
    <td>
        <div style="float:left;">  
            <input type="text" name="statuseffective" class="datepicker" size="15" >  
        </div>
    </td>  
</tr> 

If spelled out, the process would work like this:
when a user make a change to the status, JS would find the next input field that contained the class .datepicker and addClass(‘required’) as well as set focus to this field (setting focus is optional since the addClass’required’ would already make the field red).

I can determine which drop down box changed, I just cannot get to the next input element. Any help would be appreciated.

Answer 1

$('.status').change(function(){
    $(this).next('input.datepicker').addClass("required").focus();
});

Should do the trick.

Update

Ok so… because both do not have the same parent you have to go up a level. next only finds the direct next element, nextAll finds all of the elements (at the same dom level it looks like). Testing a bunch of different ways of doing it and came up with this:

$('.status').change(function(){
    $(this).parents('td').nextAll("td:first").find('.datepicker').focus()
});

That should do the trick for ya!