Llenado de inputs date automaticamente

totti026 · #1 (**permalink**) 17/09/2013, 18:13

Hola,
Tengo este ejemplo que he tomado y quiero seguirlo adaptando.
Tengo este código que al ingresar una cantidad en el input me genera la misma cantidad de inputs tipo date…

-------------------------------------------------------------------------------------------------------------------------------------------------

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Fechas</title>
<script>
function crearCampos1(cantidad){
var div = document.getElementById("1");
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("Semana " + i + ": ");
    input.setAttribute("name", "campo" + i);    
    input.setAttribute("type", "date");
    input.className = "input";
    salto.appendChild(text);
    salto.appendChild(input);
    div.appendChild(salto);
    }
}
</script>
<script>
function crearCampos2(cantidad){
var div = document.getElementById("2");
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("Semana " + i + ": ");
    input.setAttribute("name", "campo" + i);    
    input.setAttribute("type", "date");
    input.className = "input";
    salto.appendChild(text);
    salto.appendChild(input);
    div.appendChild(salto);
    }
}
</script>
 
<script>
function crearCampos3(cantidad){
var div = document.getElementById("3");
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("Semana " + i + ": ");
    input.setAttribute("name", "campo" + i);    
    input.setAttribute("type", "date");
    input.className = "input";
    salto.appendChild(text);
    salto.appendChild(input);
    div.appendChild(salto);
    }
}
</script>
 
<script>
function crearCampos4(cantidad){
var div = document.getElementById("4");
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("Semana " + i + ": ");
    input.setAttribute("name", "campo" + i);    
    input.setAttribute("type", "date");
    input.className = "input";
    salto.appendChild(text);
    salto.appendChild(input);
    div.appendChild(salto);
    }
}
</script>
 
<script>
function crearCampos5(cantidad){
var div = document.getElementById("5");
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("Semana " + i + ": ");
    input.setAttribute("name", "campo" + i);    
    input.setAttribute("type", "date");    
    input.className = "input";
    salto.appendChild(text);
    salto.appendChild(input);
    div.appendChild(salto);
    }
}
</script>
</head>
 
<body>
 
<form>
    
    Fechas 1 <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos1(this.value);" />
    <input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos1(this.form.cantidad.value);" />
    <div id="1">
        
    </div>
 
    Fechas 2 <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos2(this.value);" />
    <input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos2(this.form.cantidad.value);" />
    <div id="2">
 
    </div>
 
    Fechas 3 <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos3(this.value);" />
    <input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos3(this.form.cantidad.value);" />
    <div id="3">
 
    </div>
 
    Fechas 4 <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos4(this.value);" />
    <input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos4(this.form.cantidad.value);" />
    <div id="4">
 
    </div>
 
    Fechas 5 <input type="text" name="cantidad" id="cantidad" value="" onkeyup="crearCampos5(this.value);" />
    <input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos5(this.form.cantidad.value);" />
    <div id="5">
        
    </div>
</form>
</body>
</html>

Y lo que quiero lograr es que al yo seleccionar la fecha en el primer input “Semana 1” automáticamente se llenen los demás con las semanas que le siguen…

Espero explicarme, de antemano muchas gracias…..

Erick_MD9 · #2 (**permalink**) 17/09/2013, 18:26

Hola,

1.-Solo deberias escribir una funcion, son para reutilizar un poco el código, no para que lo copies y lo pegues.

Cambios

Código Javascript:

Ver original<script>
//cambiamos la funcion para que reciba un id
function crearCampos5(cantidad,Element_Id){
var div = document.getElementById(Element_Id);
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("Semana " + i + ": ");
   input.setAttribute("name", "campo" + i);    
   input.setAttribute("type", "date");    
   input.className = "input";
   salto.appendChild(text);
   salto.appendChild(input);
   div.appendChild(salto);
   }
}
</script>

Así, solo necesitas una funcion.

Cambios Html

Código HTML:

Ver original<input type="button" id="boton" value="Crear/Eliminar Campos" onclick="crearCampos1(this.form.cantidad.value,'1');" />
//le enviamos el id que va a procesar.ok?

Para copiar los elementos, debes crear otra funcion.
Saludos.