JQuery does not pick input value ASP.Net Core MVC

Question

I am not to experienced with JQuery and I would like your help. I am trying to add stock to an existing product. The action within the controller is being called correctly. My goal is to have a pop-alert in the event stock entered by the user is smaller than 1. When I attempt to add stock for the first item in the list, it works perfectly! Please see below example 1.

Example 1 1: https://i.sstatic.net/j39fj.png

However, when I am attempting the same for the second item in the list, the value of the stock number entered is not being picked up. Could you please help me find what I am missing and why the number is only being picked up for the first time and not for the second item in the list? Please see below example 2. Example 2

Example 2 JQuery debugging

You may also refer to the following code too.

In View:

<tbody>
@foreach (var item in Model) {
        <tr>
            <th>
                @Html.DisplayFor(modelItem => item.ProductCode)
            </th>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Description)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Stock)
            </td>
            <td>
                @{
                    var temp = (Math.Truncate(item.Price * 100) / 100).ToString("n2");
                    @Html.DisplayFor(model => temp)
                }
            </td>
            <td>
                <a id="editLink" asp-action="Edit" asp-route-id="@item.ProductCode">Edit</a> |
                <a class="deleteLink" asp-action="Delete" asp-route-id="@item.ProductCode">Delete</a>
            </td>
            <td>
                @using (Html.BeginForm("AddStock", "Livestock", FormMethod.Post))
                {
                <p>
                    <input type="hidden" name="id" value="@item.ProductCode">
                    <input type="hidden" name="pName" value="@item.Name">
                    <input type="number" name="stock" id="inputStock">
                    <input type="submit" value="Add Stock" class="btn btn-primary" id="go"/>
                </p>
                }
            </td>
        </tr>
  }
</tbody>

In site.js file

//Stock
$(document).on('click', '#go', function (event) {
    var numberIn = $('input[name=stock]').val();
    var name = $('input[name=pName]').val();

    if (numberIn < 1) {
        alert("Number must be greater than 0!");
    }
    else {

        alert("You have added " + numberIn + " stock to product: " + name);
    }

});

charlietfl · Accepted Answer · 2021-04-12 19:51:30Z

1

You can't repeat ids in a page, so use classes instead.

From the button that is clicked you want to traverse to the other elements that are associated with that button/item. In this case they are siblings

$(document).on('click', '.go-btn', function (event) {
    
    var $btn = $(this);
    var numberIn = $btn.siblings('input.input-stock').val();
    var name =  $btn.siblings('input.input-pname').val();

    if (numberIn < 1) {
        alert("Number must be greater than 0!");
    }
    else {
        alert("You have added " + numberIn + " stock to product: " + name);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <input type="hidden" name="id" class="input-id" value="code #1">
  <input type="hidden" name="pName" class="input-pname" value="item #1">
  <input type="number" name="stock" class="input-stock" value="3">
  <input type="button" value="Add Stock" class="btn btn-primary go-btn"  />
</p>

<p>
  <input type="hidden" name="id" class="input-id" value="code #2">
  <input type="hidden" name="pName" class="input-pname" value="item #2">
  <input type="number" name="stock" class="input-stock" value="7">
  <input type="button" value="Add Stock" class="btn btn-primary go-btn"  />
</p>

answered Apr 12, 2021 at 19:51

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

irini galanaki Over a year ago

Hi @charlietfl, thank you so much! It makes total sense! It works perfectly, when I use class instead!:)

Collectives™ on Stack Overflow

JQuery does not pick input value ASP.Net Core MVC

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related