3

I'm new in javaScript and don't now how to realize this. I have 'select' with numbers in my HTML.

<select class="form-control"  id="select" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

When user will choose the number in this select, js will create as many input fields as the user chooses,like on this picture [

enter image description here

How to do this?

2
  • 2
    Welcome to Stack Overflow. Please read "How to ask a question". We ask that you research your issue as best you can before posting. In your case, you need to know how to do several things to make your scenario work (set up event handlers, create new DOM elements, update the DOM). You should investigate these things and then make an attempt at a solution. If you get stuck, come back and post what you've done and what you are stuck on. But, we don't just supply answers to questions where no attempt has been made. Good luck! Commented Sep 22, 2018 at 19:53
  • 4
    Possible duplicate of Adding input elements dynamically to form Commented Sep 22, 2018 at 19:53

2 Answers 2

2

This is just to give you an idea of how to do it.

addImputs(select);


select.addEventListener("change", ()=>{
  
  addImputs(select);
  
})

function addImputs(select){
 let num = parseInt(select.options[select.selectedIndex].value);
  imputs.innerHTML = "";
  for(let i = 0; i < num; i++){
  let imp = document.createElement("input");
  imp.setAttribute("type", "text");
  imputs.appendChild(imp)
}
}
<select class="form-control"  id="select" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<div id="imputs"></div>

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

1 Comment

Thanks for the help!
1

Something like this may help

function createFileds(ele) {
  let form = document.getElementById("form");
  form.innerHTML = '';
  for(let i = 0; i < ele.value; i++) {
    form.innerHTML += '<Input name="input ' + i + '">';
  }
}
<select class="form-control"  id="select" onchange="createFileds(this)">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<form id="form"></form>
  

1 Comment

Thanks for the help!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.