CODEWITHSUNDEEP
javascripthtml
stewieranger124
stewieranger124

Reputation: 25

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

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">

Upvotes: 2

Views: 2141

Answers (1)

Always Helping
Always Helping

Reputation: 14570

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>

Upvotes: 1

Related Questions