buen día.
estoy mostrando 'N' numero de input con un select y este no funciona si esta dentro de un formulario, ya que si esta dentro de un formulario no hace nada.. tambien tengo el problema que cuando selecciono un numero por ejemplo 2 me muestra 2 input y despues selecciono el numero 3 en select me muestra 5 inputs como si los sumara.
Codigo sin Formulario donde si no hay formulario funciona pero suma el numero de inputs el cual lo que quiero es que solo muestre el numero de inputs que selecciono
function numerocampos()
{
var numero = document.getElementById("campos").value;
var padre = document.getElementById("inputs");
for(var i=1; i<=numero; i++)
{
//aquí agregamos el componente de tipo input
var input = document.createElement("INPUT");
//aquí indicamos que es un input de tipo text
input.type = 'text';
//y por ultimo agreamos el componente creado al padre
padre.appendChild(input);
}
}
<select name="numerocampos" id="campos" onchange="numerocampos()">
<option value=""></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>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="inputs"></div>
Codigo con Formulario donde si esta dentro de formulario no funciona
function numerocampos()
{
var numero = document.getElementById("campos").value;
var padre = document.getElementById("inputs");
for(var i=1; i<=numero; i++)
{
//aquí agregamos el componente de tipo input
var input = document.createElement("INPUT");
//aquí indicamos que es un input de tipo text
input.type = 'text';
//y por ultimo agreamos el componente creado al padre
padre.appendChild(input);
}
}
<form method="POST" action="">
<select name="numerocampos" id="campos" onchange="numerocampos()">
<option value=""></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>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form>
<div id="inputs"></div>