How can I create same number of input fields and fetch the data from available list items using JQuery?

Question

I have three list items (those are dynamically created and can be more or less also) whose have checkboxes and labels.

Based on number of items (<li>'s), I want to create input fields with index numbers ('Item 1, Item 2, etc...') dynamically.

Currently, I am manually appending number of divs based on list items. These list can be vary based on condition.

How can I achive this dynamically instead of using nth-child (manualy)

jsFiddle

$(document).on('click', '#getCheckboxesContent', function(){
  var count = $('.checkboxes ul li').length;
  var value1 = $('.checkboxes ul li:nth-child(1) label .lbl').text();
  var value2 = $('.checkboxes ul li:nth-child(2) label .lbl').text();
  var value3 = $('.checkboxes ul li:nth-child(3) label .lbl').text();
  $('.checkboxes-content').html('');
  $('.checkboxes-content').append('Total checkboxes : ' + count);
  $('.checkboxes-content').append('<div class="item">Item 1 : <input type="text" value="'+value1+'" /></div>');
  $('.checkboxes-content').append('<div class="item">Item 2 : <input type="text" value="'+value2+'" /></div>');
  $('.checkboxes-content').append('<div class="item">Item 3 : <input type="text" value="'+value3+'" /></div>');
})

body{font-family:verdana;font-size:14px;}
.checkboxes{padding:20px;}
ul{margin:0;padding:0;list-style:none;}
li{margin-top:5px;}
label .lbl{margin-left:5px;}
.item{margin-top:10px;background:#efefef;padding:10px;}
h2{font-weight:bold;margin:0;padding:0;font-size:16px;}
.checkboxes-content{margin:15px;}
#getCheckboxesContent{margin-left:15px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkboxes">
  <h2>Heading</h2>
  <ul>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 1</span></label></li>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 2</span></label></li>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 3</span></label></li>
  </ul>
</div>

<a href="javascript:;" id="getCheckboxesContent">Get content</a>

<div class="checkboxes-content"></div>

Rory McCrossan · Accepted Answer · 2021-02-22 11:55:19Z

1

The simplest way to achieve this dynamically would be to select all the relevant :checkbox elements in the DOM and then use map() to build a div for each of them in an array. The HTML can then be appended to the DOM in the target location. Try this:

let $checkboxContent = $('.checkboxes-content');

$(document).on('click', '#getCheckboxesContent', function() {
  let html = $('.checkboxes :checkbox').map((i, el) => `<div class="item">Item ${i + 1}: <input type="text" value="${el.nextElementSibling.textContent}" /></div>`).get();
  $checkboxContent.append(html);
});

body {
  font-family: verdana;
  font-size: 14px;
}

.checkboxes {
  padding: 20px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin-top: 5px;
}

label .lbl {
  margin-left: 5px;
}

.item {
  margin-top: 10px;
  background: #efefef;
  padding: 10px;
}

h2 {
  font-weight: bold;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.checkboxes-content {
  margin: 15px;
}

#getCheckboxesContent {
  margin-left: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkboxes">
  <h2>Heading</h2>
  <ul>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 1</span></label></li>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 2</span></label></li>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 3</span></label></li>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 4</span></label></li>
    <li><label><input type="checkbox" class="checkbox-sm" name="checkbox"><span class="lbl">Checkbox 5</span></label></li>
  </ul>
</div>

<a href="javascript:;" id="getCheckboxesContent">Get content</a>

<div class="checkboxes-content"></div>

If the number of divs should always equal the number of checkboxes then you should consider changing append() to html(), so that successive clicks of the button don't add an infinite number of elements.

edited Feb 22, 2021 at 11:55

answered Feb 22, 2021 at 11:23

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

5 Comments

Reddy Over a year ago

@Rory McCrossan, again you have saved my day :)... This is what exactly I want... Thanks for the TIP... I am Accepting and Upvoting your awesome answer :)

Rory McCrossan Over a year ago

No problem, glad to help

Reddy Over a year ago

Sorry, missed... I want to fetch the Textfield value from <span class="lbl">, not as index numbers as 1,2,3... can you please alter the code.... sorry for the confusion...

Rory McCrossan Over a year ago

Sure, change i + 1 to el.nextElementSibling.textContent in that case. I've updated the answer to give you an example

Reddy Over a year ago

Awesome... working like a charm :) Thanks again

Collectives™ on Stack Overflow

How can I create same number of input fields and fetch the data from available list items using JQuery?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related