Get the values of Dynamically created elements using Jquery

Question

I am dynamically creating input elements using jquery, but when I try to access the dynamically created element values, I'm getting either empty or undefined or . I tried many ways to get the values, but It is failing.

Could someone help me getting this done.

Here is the code

$(document).ready(function() {
  var count = 0;
  var jsondata = [];
  var selectedField;
  $('.add').click(function() {
    count = count + 1;
    jQuery('<div/>', {
      id: 'form-wrapper' + count,
      class: 'form-wrapper' + count,
      title: 'now this div has a title!'
    }).appendTo('.wrapper0');
    $('.form-wrapper' + count).append("<label>FieldName</label> <input type='text' placeholder='label' id='label" + count + "'></input> <select class='select" + count + "'><option>Select</option><option value='textbox'>Textbox</option><option value='textarea'>TextArea</option><option value='checkbox'>Checkbox</option><option value='radio'>Radio</option><option value='date'>Date</option> </select><input type='text' id='commavalues" + count + "' disabled placeholder='Enter comma(,) seperated values'></input><input type='checkbox' id='required" + count + "'>Required</input><button class='delete'>Delete</button> <br><br>");

    $('.delete').click(function(e) {
      ($(this).parent().remove());
    });

    $('.select' + count).change(function() {
      selectedField = $(this).children('option:selected').val();
      if (selectedField == 'checkbox' || selectedField == 'radio') {
        $('#commavalues' + count).prop('disabled', false);
        flag = 1;
      } else {
        flag = 0;
        $('#commavalues' + count).prop('disabled', true);
      }
    });
    item = {};

    var label = $('#label' + count).val();
    var required = $('#required' + count).is(":checked");
    var label_type = selectedField;
    var options = $('#commavalues' + count).val();

    console.log(label);
    console.log(required);
    console.log(label_type);
    console.log(options);

    item["label"] = label;
    item["label_type"] = label_type;
    item["options"] = options;
    item["required"] = required;
    jsondata.push(item);
  });

  $('.save').click(function() {
    console.log(jsondata);
  });
});

body {
  background-color: #ECEFF1;
  margin: 50px 0;
  padding: 0;
  text-align: center;
}

button {
  position: relative;
  margin-left: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper0">
  <div class="form-wrapper">
    <label>FieldName</label>
    <input type="text" placeholder="label" class="label0"></input>
    <select class="select0">
      <option>Select</option>
      <option value="textbox">Textbox</option>
      <option value="textarea">TextArea</option>
      <option value="checkbox">Checkbox</option>
      <option value="radio">Radio</option>
      <option value="date">Date</option>
    </select>
    <input type="text" class="commavalues0" disabled placeholder="Enter comma(,) seperated values"></input>
    <input type="checkbox" class="required0">Required</input>
    <br><br>
  </div>
</div>
<button class="add">Add</button>
<button class="save">Save</button>

I am trying to display in JSON format when I click save button, and If i click the delete button the data associated to that input fields are to be deleted also.

It's rarely correct to bind event handlers inside other event handlers. — Barmar, Apr 21 '19 at 09:04
When you do `$('.delete').click(...)` you're not just adding a click handler to the `.delete` button you just added, you're adding an additional handler to all the previous ones. — Barmar, Apr 21 '19 at 09:06
`$(this).children('option:selected').val();` can be simplified to just `$(this).val()`. — Barmar, Apr 21 '19 at 09:07
@Barmar so, how could it be done? Please help me and answer it sir, — chintuyadavsara, Apr 21 '19 at 09:07
The problem in your code is that all the handlers are using the same `count` variable, not the value of `count` when the handler was created. — Barmar, Apr 21 '19 at 09:12
You're setting variables like `label` when you add the new elements, not when the user fills them in. Why do you expect that to work? — Barmar, Apr 21 '19 at 09:19
There's no such thing as ``. `` isn't a container, it doesn't need an end tag. — Barmar, Apr 21 '19 at 09:20
@Barmar yeah! so, If i want to get the values, do i need to loop through all the elements and get the values? — chintuyadavsara, Apr 21 '19 at 09:27
When do you want to get all the values? When the user clicks the Save button? Then you need to loop through all the elements. — Barmar, Apr 21 '19 at 09:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/192164/discussion-between-chintuyadavsara-and-barmar). — chintuyadavsara, Apr 21 '19 at 09:32

score 1 · Accepted Answer · answered Apr 21 '19 at 09:35

One problem is that all your closures are using the same count variable, which gets incremented each time another element is added. They need a local variable for each closures.

But it would better to get rid of that variable entirely. Just give them all the same class, and use event delegation to bind to dynamically added elements. See Event binding on dynamically created elements? for detailed explanations.

The other problem is that you're getting the values when you add the elements, not when the user clicks the Save button. When that happens you need to loop through all the elements.

$(document).ready(function() {
  $('.add').click(function() {
    var form_wrapper = jQuery('<div/>', {
      class: 'form-wrapper',
      title: 'now this div has a title!',
      html: "<label>FieldName</label> <input type='text' placeholder='label' class='label'></input> <select class='select'><option>Select</option><option value='textbox'>Textbox</option><option value='textarea'>TextArea</option><option value='checkbox'>Checkbox</option><option value='radio'>Radio</option><option value='date'>Date</option> </select><input type='text' class='commavalues' disabled placeholder='Enter comma(,) seperated values'></input><input type='checkbox' class='required'>Required</input><button class='delete'>Delete</button> <br><br>"
    }).appendTo('.wrapper0');

  });

  $('.save').click(function() {
    var jsondata = $(".form-wrapper").map(function() {
      var label = $(this).find(".label").val();
      var required = $(this).find(".required").is(":checked");
      var label_type = $(this).find(".select").val();
      var options = $(this).find(".commavalues").val();

      return {
        label,
        required,
        label_type,
        options
      };
    }).get();
    console.log(jsondata);
  });

  $(".wrapper0").on("click", ".delete", function(e) {
    ($(this).parent().remove());
  });

  $(".wrapper0").on("change", '.select', function() {
    var selectedField = $(this).val();
    if (selectedField == 'checkbox' || selectedField == 'radio') {
      $(this).siblings('.commavalues').prop('disabled', false);
    } else {
      $(this).siblings('.commavalues').prop('disabled', true);
    }
  });
});

body {
  background-color: #ECEFF1;
  margin: 50px 0;
  padding: 0;
  text-align: center;
}

button {
  position: relative;
  margin-left: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper0">
  <div class="form-wrapper">
    <label>FieldName</label>
    <input type="text" placeholder="label" class="label"></input>
    <select class="select">
      <option>Select</option>
      <option value="textbox">Textbox</option>
      <option value="textarea">TextArea</option>
      <option value="checkbox">Checkbox</option>
      <option value="radio">Radio</option>
      <option value="date">Date</option>
    </select>
    <input type="text" class="commavalues" disabled placeholder="Enter comma(,) seperated values"></input>
    <input type="checkbox" class="required">Required</input>
    <br><br>
  </div>
</div>
<button class="add">Add</button>
<button class="save">Save</button>

score 0 · Answer 2 · answered Apr 21 '19 at 09:38

Hey i have fixed undefined error and seems working as expected. you can replace below code in script.

<script>
$(document).ready(function(){
   var count = 0;
   var jsondata=[];
   var selectedField;
   $('.add').click(function(){
      jQuery('<div/>', {
         id: 'form-wrapper'+count,
         class: 'form-wrapper'+count,
         title: 'now this div has a title!'
      }).appendTo('.wrapper0');
      $('.form-wrapper'+count).append("<label>FieldName</label> <input type='text' placeholder='label' class='label"+(count+1)+"'></input> <select class='select"+(count+1)+"'><option>Select</option><option value='textbox'>Textbox</option><option value='textarea'>TextArea</option><option value='checkbox'>Checkbox</option><option value='radio'>Radio</option><option value='date'>Date</option> </select><input type='text' class='commavalues"+(count+1)+"' disabled placeholder='Enter comma(,) seperated values'></input><input type='checkbox' class='required"+(count+1)+"'>Required</input><button class='delete'>Delete</button> <br><br>");

      $('.delete').click(function(e){
         ($(this).parent().remove());
      });
      item = {};

      var label = $('.label'+count).val();
      var required = $('.required'+count).prop("checked");
      var label_type = selectedField;
      var options = $('.commavalues'+count).val();

      console.log(label);
      console.log(required);
      console.log(label_type);
      console.log(options);

      item["label"] = label;
      item["label_type"] = label_type;
      item["options"] = options;
      item["required"] = required;
      jsondata.push(item);
      count++;
   });

   $('.save').click(function(){
      console.log(jsondata);
   });
   $('.select'+count).on('change', function(){
         selectedField = $(this).find('option:selected').text();
         if(selectedField == 'checkbox' || selectedField == 'radio'){
           $('#commavalues'+count).prop('disabled', false);
           flag = 1;
        }
       else{
            flag = 0;
            $('#commavalues'+count).prop('disabled', true);
       }
    });
});
</script>

score -1 · Answer 3 · answered Apr 21 '19 at 09:31

dynamically or not elements in the DOM are the sames. JQuery is JavaScript and can't do something out of JavaScript. JavaScript is mainly about DOM and DOM is HTML about elements, attributes and properties of those. So there is not propertie .value for div, instead you've to use Javascript .innerHTML (or even outerHTML) who in JQuery can be accessed by .html() or .text() regarding you want to manipulate plain HTML(who're object in DOM) or text. The .value propertie is about inputs or such elements in a HTML form tag. Hoping that'll help you.

What are you talking about? He's not trying to get the value of DIVs. — Barmar, Apr 21 '19 at 09:37

Get the values of Dynamically created elements using Jquery

3 Answers3