Crear nuevos textbox segun opción elegida de un select

SinAliaS · #1 (**permalink**) 17/03/2010, 07:34

Hola:

Estoy intentando hacer que de un select cuando selecciono un numero me cree automaticamente esa cantidad de textbox.

Estoy usando un script que encontre en este mismo foro:

Código:

<script type="text/javascript">
function createTexts(sel) {
    var num = sel.value;
    if( !num ) num = sel.options[sel.selectedIndex].value;
    if( !num ) return;

    var html="<input type=\"text\" name=\"caja_de_texto[]\" />";
    num = parseInt( num );
    var dest = document.getElementById("cajas");
    for( i = 0; i < num; i++ ) {
         dest.innerHTML += html;
    }
}
</script>

Código:

<select name="select1" id="cantidad" onchange="createTexts(this)">
    <option value="" selected="selected">Seleccionar cantidad</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select> 
<div id="cajas"></div>

y funciona a la perfeccion, pero el tema es que necesito aplicar este mismo codigo a 2 combos mas:

Código:

<select name="select2" id="cantidad" onchange="createTexts(this)">
    <option value="" selected="selected">Seleccionar cantidad</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select> 
<div id="cajas"></div>

<select name="select3" id="cantidad" onchange="createTexts(this)">
    <option value="" selected="selected">Seleccionar cantidad</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>
</select> 
<div id="cajas"></div>

y ahi ya no funciona y otra cosa que quisiera lograr es que si elijo el valor 2 del select1 aparezcan 2 textbox, pero si vuelvo a seleccionar otro valor de ese mismo select el valor 1 por ejemplo se borren los text que estaban y se cree solo uno.

Espero me puedan ayudar a lograr esto que intento hacer.

Muchas gracias de antemano.

America|UNK · #2 (**permalink**) 17/03/2010, 08:37

El atributo ID solo se usa una vez, para la función getElementById si hay mas de 1 div con el mismo ID solo tomará el primero que encuentre, prueba:

Código Javascript:

Ver originalfunction createTexts(sel) {
    var num = sel.text;
    if( !num ) num = sel.options[sel.selectedIndex].text;
    if( !num ) return;
    var html="<input type=\"text\" name=\"caja_de_texto[]\" />";
    num = parseInt( num );
    num = isNaN(num) ? 0 : num;
    sel.value = num;
    var dest = sel.parentNode.getElementsByTagName("div")[0];
    dest.innerHTML = '';
    for( i = 0; i < num; i++ ) {
         dest.innerHTML += html;
    }
}

Código HTML:

Ver original<div class="bloques">
    <select name="select1" onchange="createTexts(this)">
        <option value="" selected="selected">Seleccionar cantidad</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <div class="cajas"></div>
</div>
 
<div class="bloques">
    <select name="select2" onchange="createTexts(this)">
        <option value="" selected="selected">Seleccionar cantidad</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
    <div class="cajas"></div>
</div>

Adler · #3 (**permalink**) 17/03/2010, 08:38

Hola

Prueba este otro script que a efectos prácticos es lo mismo

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
function crearCampos(cantidad){
var div = document.getElementById("campos_dinamicos");
while(div.firstChild)div.removeChild(div.firstChild); // remover elementos;
    for(var i = 1, cantidad = Number(cantidad); i <= cantidad; i++){
    var salto = document.createElement("P");
    var input = document.createElement("input");
    var text = document.createTextNode("Campo Dinamico " + i + ": ");
    input.setAttribute("name", "campo" + i);
    input.setAttribute("size", "12");
    input.className = "input";
    salto.appendChild(text);
    salto.appendChild(input);
    div.appendChild(salto);
    }
}
</script>
 
</head>
<body>
<form>
¿Cuantos Campos? <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos(this.value);" />
<input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos(this.form.cantidad.value);" />
<div id="campos_dinamicos"></div>
</form>
</body>
</html>

Suerte

SinAliaS · #4 (**permalink**) 20/03/2010, 05:58

Hola America|UNK, era exactamente lo que andaba necesitando. Me ayudaste muchisimo.
Adler, no era justamente lo que estaba buscando pero me parecio interesante tu ejemplo y logre aplicarlo en otro trabajo, asi que me vino muy bien tambien.
Muchas gracias a los dos, por su predisposición :)