How to get value checkbox modal popup ajax on input textbox

Question

I have question quite similar to display multiple checkbox values (from modal window) in text input, via jQuery

When I select the option checkbox (Popup), it doesn't work in input <input class="select-list" type="text" name="choose"> .

This is my html:

<input class="select-list" type="text" name="choose">
<button id="myBtn" class="btn-popup" >Choose...</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Choose ...</h2>
    </div>
    <div class="modal-body">
            <div class="container">  
                <div id="disp_data"></div>     
                <div class="loading">loading...</div>           
            </div> 
    </div>
  </div>
</div>

This is my script:

<script>
/// modal
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
// fetch list db
$(document).ready(function(){  
    function fetch_data()  
    {  
        $('.loading').show();
        $('#disp_data').show();

         $.ajax({  
              url:"select.php",  
              method:"POST",  
              success:function(data){  
                   $('#disp_data').html(data);  
                   $('.loading').hide();
              }  
         });  
    }  
    fetch_data();  
});  
/// checkbox on textbox
$('input[name=name_id]').change(function() {
    $('.select-list').val(
        $('[name=name_id]:checked').map(function() {
            return $(this).val();
        }).get().join(',')
   );
});
</script>

This is my php: select.php (AJAX)

<?php  
$conn = mysqli_connect("localhost", "root", "root", "datab");  
$output = '';  
$sql = "SELECT * FROM tablemo ORDER BY id ASC";  
$result = mysqli_query($conn, $sql);  
echo '<ul>';
     while($row = mysqli_fetch_array($result)) {
          echo '<li>';
          echo '<input type="checkbox" id="'.$row['id'].'" name="name_id" value="'.$row['id'].'">';
          echo '<label for="'.$row['id'].'">'.$row['name'].'</label>';
          echo '</li>';
     }
echo '</ul>';
?>  

http://jsfiddle.net/uZcaT/

https://jsfiddle.net/behrouzbash/q5wt9un1/

Answer 1

Your problem is that the .change event listener is running before your async html comes back from the server. This means that the code will execute the call to get the data, but it will contiune to execute the code below before your async data has come back from the server.

Now, while you are fetching the data, the browser is looking for all the input[name=name_id] 's on the current page, and assign a event listener to it. However, your data has not come back before your browser has already done this, meaning your new data will not have this event listener on them.

To solve this , you would have to add the event listener ( .change ) after the data has been programatically added via $('#disp_data').html(fakeData); .