Añadir nuevas cajas de texto en automático
Tengo que hacer una pantalla donde re vayan capturando los alumnos de una escuela, pero a la hora de capturar varia el numero de alumnos de cada salón. He pensado en poner un solo registro o sea solo la primeras cajas que serian:
TxtNombre1, txtNumeroControl1, txtGrupo1 sumit añadir
Los datos que pidan. Y añadir un botón que diga otro u añadir otro, el cual al darle click me agregue en automático otras cajas:
TxtNombre1, txtNumeroControl1, txtGrupo1
TxtNombre2, txtNumeroControl2, txtGrupo2 sumit añadir
En automatico que me genere otras cajas para añadir a otro alumno y si se requiere se puede añadir mas hasta n, ¿Crees qué se pueda y si como? Un ejemplo me caeria bien.
TxtNombre1, txtNumeroControl1, txtGrupo1 sumit añadir
Los datos que pidan. Y añadir un botón que diga otro u añadir otro, el cual al darle click me agregue en automático otras cajas:
TxtNombre1, txtNumeroControl1, txtGrupo1
TxtNombre2, txtNumeroControl2, txtGrupo2 sumit añadir
En automatico que me genere otras cajas para añadir a otro alumno y si se requiere se puede añadir mas hasta n, ¿Crees qué se pueda y si como? Un ejemplo me caeria bien.
2 Respuestas
Respuesta de Germán Peralta Bernal
1
Y estudia este ejemplo creo que lo puedes adaptar a tus necesidades.
Para ampliar un poco el tema puedes buscar en google="añadir campos a un formulario dinámicamente con javascript".
Saludos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="javascript" type="text/javascript"> /* Abrimos etiqueta de código Javascript */
/* Partimos por definir una variable llamada posicionCampo. Esta variable servirá como índices para marcar cuantos campos se han agregado dinámicamente. La inicializamos en 1, ya que la primera llamada ocurrirá cuando no hayan campos agregados */
var posicionCampo=1;
/* Declaramos la función agregarUsuario( ) */
function agregarAlumno(){
/* Declaramos una variable llamada nuevaFila y a ella le asignamos la recuperación del elemento HTML designado por el id tablaUsuarios. En este caso, la tabla en la que manejamos los campos dinámicamente y llamamos a la función insertRow para agregar una fila */
nuevaFila = document.getElementById("tablaAlumno").insertRow(-1);
/* Asignamos a la propiedad id de nuevaFila el valor de posicionCampo, que inicializamos en 1 */
nuevaFila.id=posicionCampo;
/* Luego en otra variable llamada nuevaCelda, agregaremos una celda a la tabla, mediante la función insertCell */
nuevaCelda=nuevaFila.insertCell(-1);
/* Con la celda creada, insertamos dinámicamente un campo de texto, el cual almacenaremos en un array llamado nombre, con una posición equivalente a la variable posicionCampo. Una vez terminado, repetimos la acción para el sitio Web y correo, asignando al array respectivo */
nuevaCelda.innerHTML=" <form id='form1["+posicionCampo+"]' name='form1["+posicionCampo+"]' method='post' action=''> <td> <input type='text' size='30' name='nombre["+posicionCampo+"]' ></td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='30' name='control["+posicionCampo+"]' ></td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='30' name='grupo["+posicionCampo+"]' ></td>";
/* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='submit' name='enviar' id='enviar' value='Enviar' > </td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=" <td> <input type='button' value='Eliminar' onclick='eliminarUsuario(this)'> </td> </form> ";
/* Incrementamos el valor de posicionCampo para que empiece a contar de la fila siguiente */
posicionCampo++;
}
/* Definimos la función eliminarUsuario, la cual se encargará de quitar la fila completa del formulario. No es necesario hacer modificaciones sobre este código */
function eliminarUsuario(obj){
var oTr = obj;
while(oTr.nodeName.toLowerCase()!='tr'){
oTr=oTr.parentNode;
}
var root = oTr.parentNode;
root.removeChild(oTr);
}
/* Cerramos el código Javascript */
</script>
</head>
<body>
<table id="tablaAlumno">
<tr>
<td width="200">Nombre</td>
<td width="200">Numero Control</td>
<td width="200">Numero Grupo</td>
<td align="right">
<input type="button" onClick="agregarAlumno()"
value="Añadir Alumno" >
</td>
</tr>
</table>
</body>
</html>
Para ampliar un poco el tema puedes buscar en google="añadir campos a un formulario dinámicamente con javascript".
Saludos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="javascript" type="text/javascript"> /* Abrimos etiqueta de código Javascript */
/* Partimos por definir una variable llamada posicionCampo. Esta variable servirá como índices para marcar cuantos campos se han agregado dinámicamente. La inicializamos en 1, ya que la primera llamada ocurrirá cuando no hayan campos agregados */
var posicionCampo=1;
/* Declaramos la función agregarUsuario( ) */
function agregarAlumno(){
/* Declaramos una variable llamada nuevaFila y a ella le asignamos la recuperación del elemento HTML designado por el id tablaUsuarios. En este caso, la tabla en la que manejamos los campos dinámicamente y llamamos a la función insertRow para agregar una fila */
nuevaFila = document.getElementById("tablaAlumno").insertRow(-1);
/* Asignamos a la propiedad id de nuevaFila el valor de posicionCampo, que inicializamos en 1 */
nuevaFila.id=posicionCampo;
/* Luego en otra variable llamada nuevaCelda, agregaremos una celda a la tabla, mediante la función insertCell */
nuevaCelda=nuevaFila.insertCell(-1);
/* Con la celda creada, insertamos dinámicamente un campo de texto, el cual almacenaremos en un array llamado nombre, con una posición equivalente a la variable posicionCampo. Una vez terminado, repetimos la acción para el sitio Web y correo, asignando al array respectivo */
nuevaCelda.innerHTML=" <form id='form1["+posicionCampo+"]' name='form1["+posicionCampo+"]' method='post' action=''> <td> <input type='text' size='30' name='nombre["+posicionCampo+"]' ></td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='30' name='control["+posicionCampo+"]' ></td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='text' size='30' name='grupo["+posicionCampo+"]' ></td>";
/* Finalmente añadimos una última celda para las acciones y ahí agregamos un botón llamado Eliminar, el cual al ser presionado (definiendo la propiedad onClick), llamará a una función eliminarUsuario, pasando como parámetro la fila correspondiente */
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML="<td> <input type='submit' name='enviar' id='enviar' value='Enviar' > </td>";
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=" <td> <input type='button' value='Eliminar' onclick='eliminarUsuario(this)'> </td> </form> ";
/* Incrementamos el valor de posicionCampo para que empiece a contar de la fila siguiente */
posicionCampo++;
}
/* Definimos la función eliminarUsuario, la cual se encargará de quitar la fila completa del formulario. No es necesario hacer modificaciones sobre este código */
function eliminarUsuario(obj){
var oTr = obj;
while(oTr.nodeName.toLowerCase()!='tr'){
oTr=oTr.parentNode;
}
var root = oTr.parentNode;
root.removeChild(oTr);
}
/* Cerramos el código Javascript */
</script>
</head>
<body>
<table id="tablaAlumno">
<tr>
<td width="200">Nombre</td>
<td width="200">Numero Control</td>
<td width="200">Numero Grupo</td>
<td align="right">
<input type="button" onClick="agregarAlumno()"
value="Añadir Alumno" >
</td>
</tr>
</table>
</body>
</html>
Respuesta de debian_gnu
1
Eso lo haces con AJAX, es justamente para eso, acá tienes un ejemplo, descárgalo y cambiale los nombres a los campos, este ejemplo sirve perfectamente para lo que decís, http://www.miguelmanchego.com/2009/agregar-campos-usando-ajax-jquery/