Question

I’m trying to use jquery to select some hidden fields to retrieve some values from a certain row in a a table to make an ajax call. The first variable (ebId) is retrieved fine, but all of the other ones don’t ever get set. They’re all null. I can’t use the name of the hidden field because these hidden fields are dynamically created and would have the same same. So i’m trying to use a class. Any idea why the way that I’m selecting the last 3 variables (_product,_applicantType,_ssn) isn’t working?

Here’s the JQuery and the pertinent HTML

$('.submissionStatus').click(function () {
        var _ebId = $(this).next('.ebId').val();
        var _product = $(this).next('.product').val();
        var _applicantType = $(this).next('.applicantType').val();
        var _ssn = $(this).next('.ssn').val();

        $.ajax({
            type: 'GET',
            data: { ebId: _ebId, product: _product, applicantType: _applicantType, ssn: _ssn },
            url: '@Url.Action("GetSeverityErrors", "AppListing")',
            success: function (data) {
                alert('Call success')
                $(this).next('.loaded').val(true);
            },
            error: function (xhr, status, error) {
                alert('An Error Occured.');
            }
        });
    });

<input type="hidden" class="ebId" value="@item.ElectedBenefitId" />
<input type="hidden" class="product" value="@item.Product" />
<input type="hidden" class="applicantType" value="@item.ApplicantType" />
<input type="hidden" class="ssn" value="@item.Ssn" />    

A little more HTML insight:

<td align="left">
  <a style="color:red;" class="submissionStatus" href="javascript: void(0)" title="SubmissionStatus">@item.SubmissionStatus.ToPrettyString()</a>

<input type="hidden" class="ebId" value="@item.ElectedBenefitId" />
<input type="hidden" class="product" value="@item.Product" />
<input type="hidden" class="applicantType" value="@item.ApplicantType" />
<input type="hidden" class="ssn" value="@item.Ssn" />
<input type="hidden" class="loaded" value="false" />
 </td>

Answer 1

note that closest() selects closest parent element based on it’s parameter, try this:

var _ebId = $(this).siblings('input.ebId').val();
var _product = $(this).siblings('input.product').val();
var _applicantType = $(this).siblings('input.applicantType').val();
var _ssn = $(this).siblings('input.ssn').val();