Jquery .change can't retrieve inserted checkbox values

Question

I have a serious problem in my script when I want to add a new checkbox input through ajax call. The problem is that i can't retrieve the value of this checkbox after it's inserted. When i change selection1 and selection2 and selection 3 and options. The alert must show the values of the 4 fields on every field change.

I give an example here in jsfiddle : https://jsfiddle.net/pm4t91ab/39/

Script Code :

<script>
$(function() {
  $(".ch").change(function() {
    // Récupérer les données du formulaire
    var select1 = $("select#id1").val();
    var select2 = $("select#id2").val();
    var country = $("select#country").val();
        var options = "";
    var op = "<td>Options :</td>" +
      "<br />" +
      "<td>" +
      "<div>" +
      "<label>" +
      "<input type='checkbox' class='ch' id='option1' name='options' class='ch' value='1'>Option1</label>" +
      "</div>" +
      "<div>" +
      "<label>" +
      "<input type='checkbox' id='option2' name='options' class='ch' value='2'>Option2</label>" +
      "</div>" +
      "</td>";

    if (country != "") {
      $('#options_insert').html(op);
    }

    // Bind the elements dynamically created here and get the selected items
    $(document).on('click', 'input[name="options"]', function() {
      var options = $("input[name=options]:checked").map(function() { return this.value;}).get().join(",");
    });


    alert("select1=" + select1 + " select2=" + select2 + " Country=" + country + " options=" + options);

  });

});
</script>

Html Code :

<table>

  <tr>
    <td>
      Selection 1 :
    </td>
    <td>
      <select name="select1" class="ch" id="id1">
        <option value="">Nothing</option>
        <option value="val1">val1</option>
        <option value="val2">val2</option>
        <option value="val3">val3</option>
      </select>
    </td>
  </tr>

  <tr>
    <td>
      Selection 2 :
    </td>
    <td>
      <select name="select2" class="ch" id="id2">
        <option value="">Nothing</option>
        <option value="val1">sel1</option>
        <option value="val2">sel2</option>
        <option value="val3">sel3</option>
      </select>
    </td>
  </tr>

  <tr>
    <td>
      Selection 3 :
    </td>
    <td>
      <select name="select" class="ch" id="country">
        <option value="">Nothing</option>
        <option value="val1">Maroc</option>
        <option value="val2">USA</option>
        <option value="val3">Egypt</option>
      </select>
    </td>
  </tr>
  <tr id="options_insert">

  </tr>
</table>

any help will be very apreciated

Answer 1

Here is an updated version of your code. It separates the alert values event handling (when a form value changes) from the show options event handling (when the country value changes).

$(document).on('change', "select#country", function() {
  var $optionsElement = $('#options_insert');
  var $selectCountry = $("select#country").val();

  if ($selectCountry === '') {
    $optionsElement.html("");
  } else {
    $optionsElement.html("<td>Options :</td>" +
      "<br />" +
      "<td>" +
      "<div>" +
      "<label>" +
      "<input type='checkbox' class='ch' id='option1' name='options' class='ch' value='1'>Option1</label>" +
      "</div>" +
      "<div>" +
      "<label>" +
      "<input type='checkbox' id='option2' name='options' class='ch' value='2'>Option2</label>" +
      "</div>" +
      "</td>");
  }
});

$(document).on('change', '.ch', function() {
  var $select1 = $("select#id1").val();
  var $select2 = $("select#id2").val();
  var $selectCountry = $("select#country").val();
  var $options = $("input[name=options]:checked").map(function() {
    return this.value;
  }).get();

  alert("select1=" + $select1 + " select2=" + $select2 + " Country=" + $selectCountry + " options=" + $options.join(","));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>

  <tr>
    <td>
      Selection 1 :
    </td>
    <td>
      <select name="select1" class="ch" id="id1">
        <option value="">Nothing</option>
        <option value="val1">val1</option>
        <option value="val2">val2</option>
        <option value="val3">val3</option>
      </select>
    </td>
  </tr>

  <tr>
    <td>
      Selection 2 :
    </td>
    <td>
      <select name="select2" class="ch" id="id2">
        <option value="">Nothing</option>
        <option value="val1">sel1</option>
        <option value="val2">sel2</option>
        <option value="val3">sel3</option>
      </select>
    </td>
  </tr>

  <tr>
    <td>
      Selection 3 :
    </td>
    <td>
      <select name="select" class="ch" id="country">
        <option value="">Nothing</option>
        <option value="val1">Maroc</option>
        <option value="val2">USA</option>
        <option value="val3">Egypt</option>
      </select>
    </td>
  </tr>
  <tr id="options_insert"></tr>
</table>

Answer 2

Ok, here's the problem. You are adding additional elements to the DOM (the checkboxes) and when this happens you typically need to add event listeners to them. However, instead you can just change this line:

$(".ch").change(function() {

...to this...

$("table").on('change', '.ch', function() {

And that should do the trick. Here's more information.

Answer 3

It does not work because you try to retrieve values of checked inputs and checkboxes you inserting are unchecked by default. Besides that, it will work only just after insert. If you need to get values of that checkboxes after selecting them you have to create new event e.g

$('table').on('click','input[type="checkbox"]',function(){
    var options = $('input[type="checkbox"]:checked').map(function() {
        return this.value;}).get().join(",");
});

Answer 4

In JQuery you need to bind the event of the dynamically added elements using "on"

for example,

 $(function() {
      $(".ch").change(function() {
        // Récupérer les données du formulaire
        var country = $("select#country").val();

        var op = "<td>Options :</td>" +
          "<br />" +
          "<td>" +
          "<div>" +
          "<label>" +
          "<input type='checkbox' class='ch' id='option1' name='options' class='ch' value='1'>Option1</label>" +
          "</div>" +
          "<div>" +
          "<label>" +
          "<input type='checkbox' id='option2' name='options' class='ch' value='2'>Option2</label>" +
          "</div>" +
          "</td>";

        if (country != "") {
              $('#options_insert').html(op);
        }
        // Since this is in the change event of the select
        // It will never have item selected
        var options = $("input[name=options]:checked").map(function() {
          return this.value;
        }).get().join(",");

        alert("Country=" + country + " options=" + options);

      });

        // Bind the elements dynamically created here and get the selected items
        $(document).on('click', 'input[name="options"]',function(){
            var options = $("input[name=options]:checked").map(function() {
              return this.value;}).get().join(",");

              alert(options);
        });
    });