Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating new input fields with javaScript [closed]

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?

like image 473
Maxim Sukhodolets Avatar asked Feb 28 '26 16:02

Maxim Sukhodolets


2 Answers

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>
like image 63
enxaneta Avatar answered Mar 03 '26 05:03

enxaneta


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>
  
like image 36
Suman Kundu Avatar answered Mar 03 '26 04:03

Suman Kundu



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!