how to create x amount of div on select option value

Question

this is my first question on here so ill try and be as detailed as possible! I am currently creating a HTML form with a select option with options 1 - 4. My aim is to use a Javascript function to create a certain amount of div's depending on which value the user has selected from the form.

For example, if the user has selected option 2, i want to auto generate 2 div containers. Then, if the user chooses to select another option after... the correct amount of divs will then be created.

My select HTML currently looks like this;

<select id="select_seasons">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
</select>

I have created a script which will create a div on button click but this isn't my aim;

var number = 2; 
document.getElementById('add').addEventListener('click', function( 
    ) { 
    var newDiv = document.createElement('div'); 
    newDiv.id = 'container'; 
    newDiv.innerHTML = "<label>Episode " + number + " name</label> <input type='text' name='episode'" + number +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
    document.getElementById('contain_form').appendChild(newDiv);
    number++; 
});

I would appreciate it if somebody was to help me with the JS i will need to make this functionality and i hope i've explained myself clearly enough in this post!

Feel free to comment and ask for me details if required.

Thanks in advance, Sam

how are you handling the change event of select_seasons?

JGV
– JGV

2015-10-01 20:18:33 +00:00
Commented Oct 1, 2015 at 20:18 — JGV
– JGV, Commented Oct 1, 2015 at 20:18

Matt Burland · Accepted Answer · 2015-10-01 20:22:27Z

2

You need to bind the change event on your select element. Something like this:

var divs = [];

document.getElementById('select_seasons').addEventListener('change', function(e) {
  var n = +this.value;
  for (var i = 0; i < divs.length; i++) {
    divs[i].remove();
  }
  divs = [];
  for (var i = 0; i < n; i++) {
    var d = document.createElement("div");
    d.className = "new";
    document.body.appendChild(d);
    divs.push(d);
  }
});

.new {
  background-color: red;
  width: 100px;
  height: 20px;
  margin: 1px;
}

<select id="select_seasons">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

answered Oct 1, 2015 at 20:22

Matt Burland

45.3k18 gold badges110 silver badges182 bronze badges

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

Comments

Kamil Sokołowski · Accepted Answer · 2015-10-01 20:22:08Z

Solution for your problem: http://jsfiddle.net/43ggkkg7/

    document.getElementById('select_seasons').addEventListener('change', function(){ 
        var container = document.getElementById('container');

        container.innerHTML = ''; //clear

        //Find selected option
        var n = 1;
        for(var i = 0; i < this.options.length; ++i){
            if(this.options[i].selected){
                n = ~~this.options[i].value; //Cast to int
                break;
            }
        }

        for(var i = 1; i <= n; ++i){ //Because we want to count from 1 not 0
            var newDiv = document.createElement('div'); 
            newDiv.id = 'element-' + i; 
            newDiv.innerHTML = "<label>Episode " + i + " name</label> <input type='text' name='episode[" + i +"]' /> <label>Episode " + i + " embed</label> <input type='text' /> ";

            container.appendChild(newDiv);
        }
    }); 

    //Emit event on page init
    document.getElementById('select_seasons').dispatchEvent(new Event('change'));

Community · Accepted Answer · 2017-05-23 12:14:13Z

I will help you to read this now, I don't need another loop to remove the old divs in the container, you can use innedHTML and set it to empty.

<select id="select_seasons">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

document.getElementById('select_seasons').addEventListener('change', function() { 
    var self = this,
    exisiting = document.getElementById('contain_form');

   //remove existing divs
    exisiting.innerHTML = '';

  for(i=1; i<= self.value; i++) {
     var newDiv = document.createElement('div'); 
     newDiv.id = 'container'; 
     newDiv.innerHTML = "<label>Episode " + i + " name</label> <input type='text' name='episode'" + i +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
  exisiting.appendChild(newDiv);
   }
});

Check this fiddle

Heitor Chang · Accepted Answer · 2015-10-01 20:25:55Z

If I understood the question correctly, the seasons form should update and auto-fill with the select's number. Use the change event and refresh the form with the selected value.

 var selectSeasons = document.getElementById("select_seasons");
 selectSeasons.addEventListener('change', function() {
   populateForm(parseInt(this.value));
 });

 function populateForm(numberOfSeasons) {
   // first, remove all existing fields
   var containForm = document.getElementById("contain_form");
   while (containForm.firstChild) {
     containForm.removeChild(containForm.firstChild);
   }

   for (var i = 1; i <= numberOfSeasons; i++) {
     addDiv(i);
   }
 }

 function addDiv(number) {
   var newDiv = document.createElement('div');
   newDiv.id = 'container';
   newDiv.innerHTML = "<label>Episode " + number + " name</label> <input type='text' name='episode'" + number + " /> <label>Episode " + number + " embed</label> <input type='text' /> ";
   document.getElementById('contain_form').appendChild(newDiv);
   number++;
 }

Number of seasons:
<select id="select_seasons">
  <option value="0">Please make a selection</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<div id="contain_form"></div>

Tim · Accepted Answer · 2015-10-01 20:48:25Z

0

You could use the selected value of the select element:

var number = select.options[select.selectedIndex].value;

For example:

var select = document.getElementById("select_seasons");
var button = document.getElementById("add");
var container = document.getElementById("container");

button.addEventListener("click", function () {
  
  // uncomment the following line if you want the remove the previously generated divs:
  //container.innerHTML = "";

  var number = select.options[select.selectedIndex].value;
  
  for (var i = 1; i <= number; i++) {
    
    var div = document.createElement("div");
    div.innerHTML = "div #" + i;
    container.appendChild(div);
  }
});

<select id="select_seasons">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<button id="add">Add</button>

<div id="container"></div>

edited Oct 1, 2015 at 20:48

answered Oct 1, 2015 at 20:18

Tim

5,7319 gold badges41 silver badges74 bronze badges

2 Comments

Matt Burland Over a year ago

You don't remove the old divs.

Tim Over a year ago

@MattBurland He didn't ask for that. But I've added a option to remove them.

Collectives™ on Stack Overflow

how to create x amount of div on select option value

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related