jquery get text from dynamically created input

Question

I have some code that displays the JSON and allows the user to edit the text. After editing, I want to allow the user to click a button to save the new input value. Everything works as expected except for grabbing that new input value.

for (let i = 0; i < jsonObject.results.length; i++) {
    var row = `<tr scope="row" class="test-row-${jsonObject.results[i].id}">
    <td id="fName-${jsonObject.results[i].id}" data-testid="${jsonObject.results[i].id}">${jsonObject.results[i].firstName}</td>
    // some code

    $(`#save-${jsonObject.results[i].id}`).click(function(){
      clickAButton(jsonObject.results[i].id, jsonObject, i);
    });

    $(`#fName-${jsonObject.results[i].id}`).on('click', editResult)
    
}

function editResult(){
  var testid = $(this).data('testid')
  var value = $(this).html()

  $(this).unbind()
  $(this).html(`<input class="result form-control" data-testid="${testid}" type="text" value="${value}">`)
}

function clickAButton() {
  var text = $(`#fName-${jsonObject.results[index].id}`).val();
  console.log("text from " + text);
  // code
}

the code above displays

text from

How do I get it to display the new user input?

Are you able to access jsonObject and index variables inside clickButton function? — Kiran Mahale
– Kiran Mahale, Commented Feb 13, 2021 at 5:18
@KiranMahale yes, I am able to access jsonObject and index. I'm worried that it is no longer that id due to unbinding? — Truong Nguyen
– Truong Nguyen, Commented Feb 13, 2021 at 5:23
As I understood you want to take the text between the td tag so it can be accessed by textContent. Like var text = $(#fName-${jsonObject.results[index].id}).textContent; — Kiran Mahale
– Kiran Mahale, Commented Feb 13, 2021 at 5:35

Swati · Accepted Answer · 2021-02-13 05:36:34Z

1

Instead of writing mutliple event handler for all tds and button you can use only one event handler for button and td . So, when td is clicked just remove data-testid attribute from td so that again that event will not get called and to get input value use $(this).closest('tr').find('.result').val() this will give you input value where save button is clicked.

Demo Code :

var jsonObject = {
  "results": [{
    "id": 1,
    "firstName": "sas"
  }, {
    "id": 2,
    "firstName": "cd"
  }]
}

for (let i = 0; i < jsonObject.results.length; i++) {
  var row = `<tr scope="row" class="test-row-${jsonObject.results[i].id}">
    <td id="fName-${jsonObject.results[i].id}" data-testid="${jsonObject.results[i].id}">${jsonObject.results[i].firstName}</td><td><input type='button' id='save-${jsonObject.results[i].id}' value ='save'></td></tr>`

  $("table").append(row)
}

$(document).on('click', 'td[data-testid]', function() {
  var testid = $(this).data('testid')
  var value = $(this).html()
  $(this).html(`<input class="result form-control" data-testid = "${testid}" type = "text"
  value = "${value}" >`)
  //removed data-testid
  $(this).removeAttr("data-testid");
})

$(document).on('click', '[id*=save-]', function() {
  //use class to find input
  var text = $(this).closest('tr').find('.result').val();
  console.log("text from " + text);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
</table>

answered Feb 13, 2021 at 5:36

Swati

28.5k4 gold badges26 silver badges45 bronze badges

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

2 Comments

Truong Nguyen Over a year ago

how would this work if I had another field like last name? and want to grab everything in that line?

Swati Over a year ago

can you edit your question with complete code ?

Collectives™ on Stack Overflow

jquery get text from dynamically created input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related