Question

I don’t have ID’s to look at since some rows are inserted dynamically via clone.

I’m looking for the value of the systemname which corresponds to the Check System button is clicked.

Here is the function:

function getSystemInfo(btn){    
    var buttonClicked = $(btn);
    var firstSystemName = buttonClicked.parent().next().find($("input.systemname"));
    alert( $(firstSystemName).val() );
}            

Here is the generated source code:

<div name="singleSystemDiv" class="offset-bg">
    <div class="field inline">
    <label class="frmFlds_labels">System Name</label>
    <input name="systemname" class="systemname" size="15" value="d1cti1d4" type="text">
    </div>
    <div class="field inline">
    <label class="frmFlds_labels">Location</label>
        <select id="location" name="location">
            <option value=""></option>
            <option value="Akron">Akron</option>
            <option value="Allen">Allen DC - Mob</option>
            <option value="Alpharetta">Alpharetta - Mob</option>
        </select>
    </div>
    <div class="field inline">
    <label class="frmFlds_labels">Platform</label>
        <select id="platform" name="platform" onChange="updateModels(this);" class="platform">
            <option value=""></option>
            <option value="IBM" selected="selected">AIX</option>
        </select>
    </div>
    <div class="buttons">
        <input value="Remove System" onClick="removeSystemRow(this);" type="button">
        <input value="Check System" onClick="getSystemInfo(this);" type="button">
    </div>
</div>

The way I have this written, my alert is firing, undefined.

I seem to have to ask a lot of SO questions regarding traversing. If anyone has a web site that demonstrates this, please post that. jQuery’s docs regarding .next(), parents(), etc, aren’t doing it for me.

Answer 1

Try this:

function getSystemInfo(btn){    
    var buttonClicked = $(btn);
    var $firstSystemName = buttonClicked.closest("div[name='singleSystemDiv']").find($("input.systemname"));
    alert($firstSystemName.val());
}  

Example fiddle

Alternatively, you could use buttonClicked.parent().parent().find($("input.systemname")); but I personally find chained parent() calls a bit ugly.