Get the value of dynamically added textbox-CodePudding

I've a table where I dynamically add textbox and button, also an ajax function that returns a value by sending the textbox string to the controller where it does all the processing. The code works fine if it's just a single textbox but adding N textbox doesn't work, what should I modify to make the ajax function work with each desired textbox? That is to say If I want to send the value that is in textbox #2 with its respective button and when clicking on it (btnSearch), what is in textbox #2 is sent and not in number #1

Table code

<a href="#" id="addNew" style="text-align:right;float:right"><input type="button" value="Add record" style="height: 30px;width: 110px;font-size: 0.75em" /></a>
<table id="dataTable">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
            int i = 0;
            //foreach (var p in Model.TBHDR)
            for (i = 0; i < Model.TBHDR.Count && i < Model.TBDTL.Count; i  )
            {
        <tr>
            <td>@Html.TextBoxFor(mod => mod.TBHDR[i].PR_REQ_OWNER, new { id = "hdr_req_owner", @class = "own" })<input type="button" value="Search" id="btnSearch" /></td>
            <td><a href="#" id="remove"  name="pr_remove">Remove</a></td>
        </tr>
            }
    </tbody>
</table>

Ajax function

                $('#dataTable').on('click', '#btnSearch', function (e) {
                  $.ajax({
                  url: "@Url.Action("GetOwner", "PR_Creation")",
                  data: { ownerName: $('#hdr_req_owner').val() },
                  type: "GET",
                  dataType: "json",
                  success: function (data) {
                    $('#hdr_req_owner').val(data)
                },
                error: function () {
                    alert("Failed! Please try again.");
                }
            });
            });

Edit 1: Add render elements

CodePudding user response：

$('#hdr_req_owner').val() this function always return only first element in DOM. so always you are getting first input value.

Don't repeat same ID use classes etc..

try to catch the parent of button on click and than use jQuery find method to get the input field. hope it will work.

   $('#dataTable').on('click', '#btnSearch', function (e) {
                let input_field_value = $(this).parents('tr').find(
                '#hdr_req_owner').val();
                  $.ajax({
                  url: "@Url.Action("GetOwner", "PR_Creation")",
                  data: { ownerName: input_field_value },
                  type: "GET",
                  dataType: "json",
                  success: function (data) {
                    $('#hdr_req_owner').val(data)
                },
                error: function () {
                    alert("Failed! Please try again.");
                }
            });
            });

CodePudding user response：

So as I mentioned in the comment, you need to find which element clicked, and use that element.

// find elements
var banner = $("#banner-message")

// handle click and add class
banner.on("click", (event) => {
  const name = event.target.dataset.name;
   $.ajax({
     url: `https://api.github.com/users/${name}`,
     type: "GET",
     dataType: "json",
     success: function (data) {
       event.target.innerText  = data.public_repos
     },
     error: function () {
       alert("Failed! Please try again.");
     } 
     })
   })
jQuery($ => {
    const names = ['janatbek', 'ashley', 'david'];
    for (let i = 0; i < names.length; i  ) {
    banner.append(`<button  data-name="${names[i]}">number of public repos of ${names[i]} : </button>`);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
</div>