Can not get the changed value of input fields which are created dynamically

Question

I have a button in my Html. If I clicked the button then two input field generates. I set a default value for the input fields. But I want to change the value. Whenever I change any value, I try to get the changed value of the input field through jQuery. But I can not access that. I only get the event.target. But I want the changed value. So far I tried the following.

<button type='button' id="add">click</button>

<div id='cloneDoc'></div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    $("div").change(function(event) {
      console.log(event.target);
    });
  });

  document.getElementById("add").addEventListener("click", function() {
    var htmlClone = '<input  type="number" name="a" value="50" /><br><input  type="number" name="b" value="46" /><br><br>'
    document.getElementById('cloneDoc').innerHTML += htmlClone;
  });
</script>

Use event delegation `$(document).on('change','#cloneDoc input',function(event) { console.log($(this).val()); });` — Krish, Jul 29 '19 at 08:44

Mamun · Accepted Answer · 2019-07-29T08:48:28.410

1

You can set the value attribute using jQuery's .attr(). Also, I am not sure why you are mixing jQuery and JavaScript unnecessarily.

$(document).ready(function() {
  $("table").change(function(event) {
    $(event.target).attr('value', event.target.value);
    console.log(event.target);
  });
})


$("#add").on("click", function() {
  var htmlClone = '<input  type="number" name="a" value="50" /><br><input  type="number" name="b" value="46" /><br><br>';
  $('#cloneDoc').append(htmlClone);
});

<button type='button' id="add">click</button>

<table id='cloneDoc'></table>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

edited Jul 29 '19 at 08:48

answered Jul 29 '19 at 08:31

Mamun

66,969
9
47
59

I am a beginner of javascript and jquery. So I messed up these things. Highly appreciate for your help. But one thing I don't understand why the question become duplicated. I don't get my answer from the links. – tuhin47 Jul 29 '19 at 09:21
@tuhin47, the question is not a duplicate at least for the given link. I really don't why it has been duplicated, may be that is done mistakenly:) – Mamun Jul 29 '19 at 09:29

score 1 · Answer 2 · answered Jul 29 '19 at 08:38

let obj = {a: 50, b: 46};
$(document).ready(function() {
  $("table").change(function(event) {
    obj[event.target.name] = event.target.value;
    $(event.target).attr("value", event.target.value);
  });
});

$("#add").click(function() {
  let htmlClone = `<input  type="number" name="a" value="${obj.a}" /><br><input  type="number" name="b" value="${obj.b}" /><br><br>`;
  debugger;
  document.getElementById('cloneDoc').innerHTML += htmlClone;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type='button' id="add">click</button>

<table id='cloneDoc'></table>

score 0 · Answer 3 · answered Jul 29 '19 at 08:30

0

You are appending the HTML to Div element. Rather than you have to create the input element first and than try to apply the change event on it.

answered Jul 29 '19 at 08:30

Shivani Sonagara

1,299
9
21

Can not get the changed value of input fields which are created dynamically

3 Answers3