Foros del Web » Programando para Internet » Javascript »

Crear nuevos textbox segun opción elegida de un select

Estas en el tema de Crear nuevos textbox segun opción elegida de un select en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/03/2010, 07:34
 
Fecha de Ingreso: septiembre-2003
Mensajes: 197
Antigüedad: 14 años, 10 meses
Puntos: 0
Pregunta Crear nuevos textbox segun opción elegida de un select

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.
  #2 (permalink)  
Antiguo 17/03/2010, 08:37
Avatar de America|UNK  
Fecha de Ingreso: noviembre-2006
Ubicación: Piura - Perú
Mensajes: 582
Antigüedad: 11 años, 7 meses
Puntos: 56
Respuesta: Crear nuevos textbox segun opción elegida de un select

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 original
  1. function createTexts(sel) {
  2.     var num = sel.text;
  3.     if( !num ) num = sel.options[sel.selectedIndex].text;
  4.     if( !num ) return;
  5.     var html="<input type=\"text\" name=\"caja_de_texto[]\" />";
  6.     num = parseInt( num );
  7.     num = isNaN(num) ? 0 : num;
  8.     sel.value = num;
  9.     var dest = sel.parentNode.getElementsByTagName("div")[0];
  10.     dest.innerHTML = '';
  11.     for( i = 0; i < num; i++ ) {
  12.          dest.innerHTML += html;
  13.     }
  14. }

Código HTML:
Ver original
  1. <div class="bloques">
  2.     <select name="select1" onchange="createTexts(this)">
  3.         <option value="" selected="selected">Seleccionar cantidad</option>
  4.         <option>1</option>
  5.         <option>2</option>
  6.         <option>3</option>
  7.     </select>
  8.     <div class="cajas"></div>
  9. </div>
  10.  
  11. <div class="bloques">
  12.     <select name="select2" onchange="createTexts(this)">
  13.         <option value="" selected="selected">Seleccionar cantidad</option>
  14.         <option>1</option>
  15.         <option>2</option>
  16.         <option>3</option>
  17.         <option>4</option>
  18.     </select>
  19.     <div class="cajas"></div>
  20. </div>
__________________
/* El que atiende, entiende..., el que entiende, aprende!.
Desarrollo Web Freelance, Contactar */
  #3 (permalink)  
Antiguo 17/03/2010, 08:38
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 11 años, 6 meses
Puntos: 126
Respuesta: Crear nuevos textbox segun opción elegida de un select

Hola

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

Código Javascript:
Ver original
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function crearCampos(cantidad){
  5. var div = document.getElementById("campos_dinamicos");
  6. while(div.firstChild)div.removeChild(div.firstChild); // remover elementos;
  7.     for(var i = 1, cantidad = Number(cantidad); i <= cantidad; i++){
  8.     var salto = document.createElement("P");
  9.     var input = document.createElement("input");
  10.     var text = document.createTextNode("Campo Dinamico " + i + ": ");
  11.     input.setAttribute("name", "campo" + i);
  12.     input.setAttribute("size", "12");
  13.     input.className = "input";
  14.     salto.appendChild(text);
  15.     salto.appendChild(input);
  16.     div.appendChild(salto);
  17.     }
  18. }
  19. </script>
  20.  
  21. </head>
  22. <body>
  23. <form>
  24. ¿Cuantos Campos? <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos(this.value);" />
  25. <input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos(this.form.cantidad.value);" />
  26. <div id="campos_dinamicos"></div>
  27. </form>
  28. </body>
  29. </html>

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #4 (permalink)  
Antiguo 20/03/2010, 05:58
 
Fecha de Ingreso: septiembre-2003
Mensajes: 197
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Crear nuevos textbox segun opción elegida de un select

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 :)

Etiquetas: nuevos, select, textbox
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:27.