How to create new input text using a select with values in form using Javascript?

Question

function updateItems() {
  const data = {
  ItemNames: []
  };
  var ItemCount = document.getElementById("selectQty").value;
  for (var i = 1; i <= ItemCount; i++){
    data.ItemLists.push({
      id: `ItemName${i}`,
      value: document.getElementById(`ItemName${i}`).value
    });
  }
}

Above is my code, I am trying to create new input text called id="ItemName" to create based on the value in the select combobox called id="selectQty". I created this loop but it doesn't create new input text based on the selected number in the combo box. I am beginner at Javascript and doing exercises. I tried looking for other solution but I can't seem to find any. Any help will be appreciated.

This function will be called on using the select:

<select id="selectQty" onchange="updateItems()">
  <option value="0" disabled selected value>Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="2">3</option>
  <option value="2">4</option>
  <option value="2">5</option>
  <option value="2">6</option>
  <option value="2">7</option>
</select>

This is my input text

<input type="text" id="ItemName" placeholder="Item Name">

use createElement() for creating new elements to the DOM. please refer to this documentation: w3schools.com/jsref/met_document_createelement.asp — BillJustin
– BillJustin, Commented Aug 22, 2020 at 7:51
Couple of things here data has a property named ItemNames, but you are pushing data into it's ItemLists array. And, where is the code for adding input fields? — Asutosh
– Asutosh, Commented Aug 22, 2020 at 7:52
Try using innnerHTML method to insert the <input> string template into the html — sugars
– sugars, Commented Aug 22, 2020 at 7:54
Are you trying to create new inputs when you select the qty from the options ? If yes! where do you want those input to appear OR You want to store them in an array ? — Always Helping
– Always Helping, Commented Aug 22, 2020 at 8:04

Always Helping · Accepted Answer · 2020-08-22 08:29:52Z

1

You need to use createElement method to create new dynamically added inputs.

To get the value of actual input we need to create we can use _this.value which will be coming from our onclick function.

You might notice this + sign which mean we are converting the string number to actual integer format for looping purposes.

Also, i have also addedlabel to each of your input when they are created you can name the label to what suits you the best.

In addition, to make it look nicer we can add line break <br> to make sure our labels and input are generated in each line.

Lastly, you need to use innerHTML to make sure that you set the results to empty each time you select a different option from the select.

You can also refer to each comment as well i have added in each line of JS code below.

Live Demo:

function updateItems(_this) {
  var ItemCount = +_this.value //get the value
  var results = document.querySelector('#results') //append results
  results.innerHTML = '' //clear the results on each update
  for (var i = 1; i <= ItemCount; i++) {
    var input = document.createElement('input') //create input
    var label = document.createElement("label"); //create label
    label.innerText = 'Input ' + i
    input.type = "text";
    input.placeholder = "Type text here"; //add a placeholder
    input.className = "my-inputs"; // set the CSS class
    results.appendChild(label); //append label
    results.appendChild(document.createElement("br"));
    results.appendChild(input); //append input
    results.appendChild(document.createElement("br"));
  }
}

<select id="membership-members" onchange="updateItems(this)">
  <option value="0" disabled selected>Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
</select>
<br>
<br>
<div id="results"></div>

edited Aug 22, 2020 at 8:29

answered Aug 22, 2020 at 8:24

Always Helping

14.6k4 gold badges16 silver badges30 bronze badges

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

2 Comments

stewieranger124 Over a year ago

Thank you so much, first time seeing createElement

Always Helping Over a year ago

@stewieranger124 You are welcome. happy coding. Please consider upvotting my answer as well by clicking the grey upvote arrow in my answer. thank you :)

Collectives™ on Stack Overflow

How to create new input text using a select with values in form using Javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related