Getting the value of an HTML helper element and datepicker nested in a table via JQuery

Question

I have a table which populates each row with the user and a numerical stepper(@Html.EditorFor) as well as a set of date pickers. When I try to pass the value of the numerical stepper and date fields into an array, it doesn't appear get the value like it does for the user's names which are simply text. Any recommendations?

MVC Partial View Code (Table Code):

@foreach (var x in Model.Team)
{
    <tr class="">
        <td>@Html.DisplayFor(modelItem => x.UserFullName)</td> @*Column 0*@
        <td>@Html.EditorFor(modelItem => x.CurrentTicketLevel, "", new { htmlAttributes = new { type = "number", min = 6, max = 110, @class = "form-control", @style = "width:70px;", @id = "TicketCounts" } })</td> @*Column 1*@

        <td class="StartDateField" id="StartDateField">
            @*Column 3*@
            <div class="input-group">
                <span title="Select Start Date" class="input-group-addon" id="basic-addon1"><a class="glyphicon glyphicon-calendar"></a></span>
                @Html.EditorFor(modelItem => x.StartDate, "", new { htmlAttributes = new { @class = "startdate form-control", @id = "UStartDateField", @style = "width:120px" } })
            </div>
        </td>

        <td class="EndDateField" id="EndDateField">
            <div class="input-group">
                <span title="Select End Date" class="input-group-addon" id="basic-addon1"><a class="glyphicon glyphicon-calendar"></a></span>
                @Html.EditorFor(modelItem => x.EndDate, "", new { htmlAttributes = new { @class = "enddate form-control", @id = "UEndDateField", @style = "width:120px" } })
            </div>
        </td>
    </tr>
}

JQuery Code

 $("#TicketCounts,#UStartDateField").on('change',function readTblValues() {
        var TableData = '';
        $('#tbTableValues').empty();    // clear textbox
        $('#memberTable tr').each(function (row, tr) {
            TableData = TableData
                + $(tr).find('td:eq(0)').text() + ' '  // Associate Name
                + $(tr).find('td:eq(1)').text() + ' '
                + '\n';
        });

$("#TicketCounts,#UStartDateField").on('change',function readTblValues() {
    storeTblChanges();
})

//function to save table data to array
function storeTblChanges() {
    var TableData = new Array();

    $('#memberTable tr').each(function (row, tr) {
        TableData[row] = {
            "RepID": $(tr).find('td:eq(0)').text() + ' ' //RepID
            , "Tickets": $(tr).find('td:eq(1)').text() + ' ' //Ticket Count
            , "StartDate": $(tr).find('td:eq(2)').text() + ' ' //StartDate
            , "EndDate": $(tr).find('td:eq(3)').text() + ' ' //EndDate
        } //End of TableData[row]

    });//End each function

    TableData.shift();
    console.log(TableData)

return TableData;
}//End fn storeTblChanges()

In the first row of the console.log output, tickets: should have 100 and StartDate: should have 9/20/2017

Answer 1

From the documentation for .text()

The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method.

So change it to,

$('#memberTable tr').each(function (row, tr) {
    TableData[row] = {
        "RepID": $(tr).find('td:eq(0) input').val() + ' ' //RepID
        , "Tickets": $(tr).find('td:eq(1) input').val() + ' ' //Ticket Count
        , "StartDate": $(tr).find('td:eq(2) input').val() + ' ' //StartDate
        , "EndDate": $(tr).find('td:eq(3) input').val() + ' ' //EndDate
    } //End of TableData[row]

});//End each function

Some notes:

• id should be unique in an HTML page. When you're looping, don't assingn ids manually. If you have 3 rows, then you have 3 input elements with the same id. This will cause undesirable behavior when you want to target particular elements. For example: Try doing $("#TicketCounts").val(100). This will only update the first row's ticket count and not all rows.
• So, you should add a unique class to each input element and you should subscribe to the change event for that. for example: $(".startdate").change(function() { .This will trigger for all the start date changes.
• You should use a for loop instead of foreach whenever you're looping and creating form elements like inputs. If you were to submit this form, your Team list will be null. (Detailed Answer)
• I'm assuming you get the header tr in your .each and this is why you are performing a .shift(). Instead of this, wrap your rows inside a tbody, then $('#memberTable tbody tr').each(function (row, tr) {. This will get only the body rows and not the header.