Get the value of dynamically added textbox - Jquery

BlackSD
January 5, 2023
189 views
0 votes
2 Answers

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" class="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

Tags: ajax jquery

Answers

$(‘#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.");
                }
            });
            });

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 class="change-color" 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>

Please signup or login to give your own answer.

Click here to cancel reply.

Get the value of dynamically added textbox – Jquery

Answers