CODEWITHSUNDEEP
javascript
methhead
methhead

Reputation: 115

how to create x amount of div on select option value

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

Upvotes: 1

Views: 2387

Answers (5)

Tim
Tim

Reputation: 5691

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>

Upvotes: 0

Heitor Chang
Heitor Chang

Reputation: 6057

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>

Upvotes: 0

Overmachine
Overmachine

Reputation: 1733

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

Upvotes: 0

Matt Burland
Matt Burland

Reputation: 45155

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>

Upvotes: 2

Kamil Sokołowski
Kamil Sokołowski

Reputation: 333

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'));

Upvotes: 0

Related Questions