In my table, I have various item numbers listed with corresponding quantity input fields identified by id="itemNumber". Each line also includes a button that triggers a function (onclick="addItemAndQuantity(itemNumber)") to retrieve information based on the selected item number from the table.
Initially, when a quantity is entered and submitted, the function properly receives the itemNumber. However, if I sort the table or switch pages before submitting again, the function unexpectedly receives the entire input element with id and classes such as: input#itemNumber.form-control.w80
This behavior is not desired as it complicates the function logic. The table's functionality is managed using DataTables, which seems to impact this issue, but I have been unable to resolve it despite efforts. Any guidance on this matter would be greatly appreciated.
The expected outcome should always mirror the initial interaction seen in this image: https://i.sstatic.net/XVVEU.png
However, after sorting or navigating within the table, the function unexpectedly receives the full input element as shown here: https://i.sstatic.net/QCmgi.png
A simplified representation of the table structure is:
<table class="table table-sm table--hover table--bordered" id="dataTableAddItemToOrder">
<thead>
<tr>
<th scope="col"&g t;Item number</th>
<th scope="col"& gt;Description</th>
<th scope="col"& gt;Quantity</th>
<th scope="col"& gt;Actions</th>
</tr>
</thead>
<tbody>
@foreach (var listItem in Model.AllItems)
{
<tr>
<td>@listItem.ItemNumber</td>
<td>@listItem.Description</td>
<td>
<input type="text" id="@listItem.ItemNumber" name="itemQuantity" placeholder="0" class="form-control w80" autocomplete="off" />
</td>
<td>
<button type="button" class="btn hsa-btn-primary" onclick=& quot;addItemAndQuantity(@listItem.ItemNumber)">Add</button>
</td>
</tr>
}
</tbody>
</table>
A simplified version of the associated script is:
function addItemAndQuantity(itemNumber) {
let input = document.getElementById(itemNumber);
}