CODEWITHSUNDEEP
jqueryhtmlasp.netrazor
Eric Yeoman
Eric Yeoman

Reputation: 1036

Getting values of elements in same row when button is clicked, one button per row

I have a table, each row of which contains a button and some elements. I want to get the value of some of those elements when the button is clicked, and then pass it through to an Ajax call.

My problem is getting the value of those elements.

A table row looks like this:

<tr>
    <td>
        <input id="item_AllocationId" name="item.AllocationId" type="hidden" value="39">
        <input class="form-control input-width-medium text-box single-line" data-val="true" data-val-required="The Description field is required." id="item_Description" name="item.Description" type="text" value="Welcome Centre Rent">
    </td>
    <td>
        <div class="checker" id="uniform-item_GiftAidable"><span><input class="uniform checkbox" id="item_GiftAidable" name="item.GiftAidable" type="checkbox" value="true"></span></div><input name="item.GiftAidable" type="hidden" value="false">
    </td>
    <td>
        <div class="checker" id="uniform-isActive"><span class="checked"><input checked="checked" class="uniform checkbox" id="isActive" name="item.IsActive" type="checkbox" value="true"></span></div><input name="item.IsActive" type="hidden" value="false">
    </td>
    <td>
        <input class="update-allocation" type="submit" name="update-allocation" value="Update">
    </td>

</tr>

and the jQuery:

$(document).ready(function () {
    $('.update-allocation').click(function (event) {
        var isactive = $(this).parent().find('#isActive:checkbox:checked');
        alert(isactive);
    });
});

Which at least finds an object, but as soon as I but .val() in there it comes up undefined.

Here's a jsFiddle

Am I heading in the right direction? Or have I got completely lost in the DOM?

FYI the HTML is generated using ASP.Net Razor.

Upvotes: 1

Views: 8454

Answers (2)

Gene Parcellano
Gene Parcellano

Reputation: 6044

Here's a fiddle with an example https://jsfiddle.net/m0nk3y/owoze110/5/

What I did is cache the parent row <tr>, and then used that as a reference. From there you can find the value of the specific field(s). I did it for description in this example:

$('.update-allocation').click(function (event) {
    var $row = $(this).parents('tr');
    var desc = $row.find('input[name="item.Description"]').val();
    var gift = $row.find('input[name="item.GiftAidable"]').is(':checked');
    var isActive = $row.find('input[name="item.IsActive"]').is(':checked');

    alert('description: ' + desc + '\ngift aidable: ' + gift + '\nis active: '+isActive);
});

Also, I noticed that you're using the same ID attribute for all your input. I would recommend you use class instead, since you should only have one instance of an ID. Let me know if you have additional questions. Good luck.

Upvotes: 8

Stryner
Stryner

Reputation: 7318

jQuery always* returns an object. In this case, the object it's returning is empty, which you cannot tell from a simple alert(isactive) (although you could do alert(isactive.length)).

The problem lies in the following code:

$(this).parent().find('#isActive:checkbox:checked')

The parent of .update-allocation is its td element, which doesn't contain #isActive.

I would suggest using .closest to get the closest parent tr:

$(this).closest("tr").find('#isActive:checkbox:checked')

See updated fiddle: http://jsfiddle.net/owoze110/1/

*Unless you call a function like .is which doesn't.

Upvotes: 1

Related Questions