How to get the number value in dropdown select and create element input textboxes from the value selected?

Question

Simple Question from a beginner/learner in JS.

I have a select option with number values, I want to create a number of textboxes when select a number in the options.

For example: On the dropdown I select 8, so it need to output 8 texboxes.

my code below:

<select class="form-control" id="textboxes">
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
          </select>



  var textboxNumbers = document.getElementById("textboxes").value;

  var i;

  for(i=0; i<textboxNumbers; i++){

    var yourTextboxes = document.createElement("INPUT");
    yourTextboxes.setAttribute("type", "text");
    document.getElementById("balls").appendChild(yourTextboxes);
  }

Vanessa Chin · Accepted Answer · 2020-11-11 09:14:42Z

2

Add value in option and add onchange in select

function changeValue(){
  var textboxNumbers = document.getElementById("textboxes").value;
  balls.innerHTML = '';
  var i;

  for(i=0; i<textboxNumbers; i++){

    var yourTextboxes = document.createElement("INPUT");
    yourTextboxes.setAttribute("type", "text");
    document.getElementById("balls").appendChild(yourTextboxes);
  }
}

<select class="form-control" id="textboxes" onchange="changeValue()">
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>

<div id="balls"></div>

edited Nov 11, 2020 at 9:14

answered Nov 11, 2020 at 9:08

Vanessa Chin

313 bronze badges

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

1 Comment

alexP Over a year ago

There's no need for value. "...The value of an option element is the value of the value content attribute, if there is one, or, if there is not, the value of the element's text IDL attribute"

alexP · Accepted Answer · 2020-11-11 09:04:50Z

In your select-Tag you need a change event. The change event calls the addElements function with the this parameter (this contains the select element). In your function you can get the selected value with selectElement.value. Before adding elements balls.innerHTML = "" will empty your balls element.

function addElements(selectElement) {
  var textboxNumbers = selectElement.value;
  var balls = document.getElementById("balls");

  balls.innerHTML = ""; //Empty "balls" element

  for (var i = 0; i < textboxNumbers; i++) {
    var yourTextboxes = document.createElement("INPUT");
    yourTextboxes.setAttribute("type", "text");
    balls.appendChild(yourTextboxes);
  }
}

<select class="form-control" onchange="addElements(this)" id="textboxes">
  <option>Please Select</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
</select>

<div id="balls"></div>

brk · Accepted Answer · 2020-11-11 09:06:41Z

You are almost there. Create and call a function on change of the drop down.

const balls = document.getElementById("balls")

function createTxtBox() {
  var textboxNumbers = document.getElementById("textboxes").value;
  var i;
  balls.innerHTML = ''; // remove previously created text box
  for (i = 0; i < textboxNumbers; i++) {
    var yourTextboxes = document.createElement("INPUT");
    yourTextboxes.setAttribute("type", "text");
    balls.appendChild(yourTextboxes);
  }


}

<select class="form-control" id="textboxes" onchange='createTxtBox()'>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>
<div id='balls'></div>

Collectives™ on Stack Overflow

How to get the number value in dropdown select and create element input textboxes from the value selected?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related