Question 35621 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Get the value of dynamically added textbox – Jquery

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
enter image description here

Tags:

2

Answers


  1. 0

    $(‘#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.");
                }
            });
            });
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search