Formularios Javascript
En CLH, en nuestro afán de cubrir hasta los últimos posibles detalles en cada temática, hemos hablado en varias ocasiones de los formularios Web. Ya sea estilizándolos, validándolos por Javascript, añadiendo Calendarios o incluso haciéndolos, esto se debe a lo que siempre remarcamos, que es su importancia dentro de un sitio que pretenda interactuar con sus visitantes.
Pues bien, hoy añadimos una nueva página a las numerosas lecciones al respecto. En esta ocasión, les enseñaremos a añadir campos al formulario de forma dinámica, para permitirle a un usuario en particular definir cuantos datos de un tipo quiere ingresar.
El detalle, como siempre, después del salto.
Antes de partir, una pequeña explicación:
Lo que haremos, será añadir una pequeña funcionalidad a nuestro formulario, para que mediante un botón, el usuario pueda añadir más campos para ingresar un tipo de dato en particular y así definir la cantidad que estime conveniente. Esto lo haremos mediante un formulario en HTML y un código en Javascript, además de un poco de PHP para procesar el formulario.
Es una muy buena pregunta, que tiene una respuesta así de buena. Cuando hacemos un formulario, en algunas ocasiones nos presentamos con la problemática de que para una información en particular, el número de datos a ingresar puede ser relativo.
Por ej: Si le queremos preguntar al usuario el nombre de sus hermanos o familiares, ¿Cómo definimos cuantos tendrán?. Claro, podríamos irnos a la segura y poner 10 o 15 campos, pero si el usuario solo tiene 1 hermano, estaríamos manejando una gran cantidad de datos innecesariamente.
Por esto es mejor darle el control al usuario y permitirle añadir más campos para el mismo dato según estime conveniente.
Con eso claro, vamos, manos a la obra:
1.- Lo primero que haremos, será crear nuestro formulario con los datos que querremos que el usuario ingrese. Si tienen dudas sobre como hacerlo, les recomendamos leer este tutorial donde hemos cubierto el proceso por completo.
2.- Una vez que hemos creado nuestro formulario debemos hacer los ajustes para preparar nuestros campos dinámicos. Para eso nos dirigimos a donde están este campo (dentro de la celda, o entre las etiquetas td y /td si hemos insertado una tabla dentro del formulario, lo que es recomendable) y ahí lo que haremos será crear otra tabla en donde dejaremos los campos dinámicos. Así nos aseguraremos que sin importar cuantos campos se agreguen, ni el formulario ni la tabla principal pierdan la forma, así que dentro de la celda, agregaremos el código correspondiente. En este caso, como demostramos con un formulario para agregar nuevos usuarios añadiremos:
| Nombre | Sitio Web | Correo Electrónico |
Lo que hemos hecho aquí es simplemente añadir una fila con 3 celdas, en las que se indica el nombre de un usuario, su sitio Web y su correo. Ojo que solo agregamos las celdas con los títulos. Los campos de texto los agregaremos en el siguiente paso para ver como lo hacemos dinámicamente.
3.- A continuación, en una nueva fila de la tabla principal que está en el formulario, agregaremos y alinearemos a la derecha un botón para agregar nuevas filas:
| Nombre | Sitio Web | Correo Electrónico |
Con esto, hemos creado una celda alineada a la derecha y hemos añadido un botón al cual se le ha asignado un atributo onClick, es decir, cuando se pulse este botón, se ejecutará una acción, en este caso, llamará a una función agregarUsuario() en Javascript que ya definiremos.
4.- Como describimos en el paso anterior, haremos una llamada a una función en Javascript que se encargará de añadir un campo cada vez que pulsemos el botón. Así que entre las etiquetas head y /head, agregaremos el siguiente código. La explicación, como siempre, en negrita, cursiva y entre /* y */:
5.- Y listo. Ahora podemos agregar campos dinámicamente y enviarlos a través del formulario, almacenando los datos en arrays, lo cual hará más sencillo de procesar y rescatar después mediante PHP o algún otro lenguaje dinámico, para manipular esos datos y hacer con ellos lo que necesitemos, como insertar en una BD o simplemente desplegar por pantalla.
Actualización: Agregamos esto debido a las preguntas que nos han dejado en los comentarios, para quienes les pueda servir:
Para recoger los datos que envíen en ese formulario, deben considerar que los estamos enviando en arreglos (nombre[posicion], web[posicion] y correo[posicion]), por lo que al momento de rescatar sus datos en la página de destino (ya sea en POST o GET), deben recorrer estos arreglos y procesar cada dato.
¿Cómo recorrerlos? Esta es una manera muy básica de hacerlo (ejemplo en PHP, con un formulario enviado por POST. En GET es similar):
/* Aquí la conexión a la BD */
$nombre = $_POST['nombre'];
$web = $_POST['web'];
$correo = $_POST['correo'];
$i = 0;
foreach($nombre as $n) {
mysql_query('INSERT INTO usuarios(usuario_nombre, usuario_web, usuario_correo) VALUES("'.$n.'", "'.$web[$i].'", "'.$correo[$i].'")');
$i++;
}
Recuerden que esto es una forma múy básica de hacerlo, a eso es necesario agregarle comprobaciones u optimizaciones que puedan servirles, pero ya es una base para partir.
Como siempre, les recordamos que este tutorial ha sido:
Esperamos que haya sido de utilidad para Uds.
Cualquier duda que tengan, los invitamos a dejarnos un comentario en el área habilitada a continuación.
Muchas gracias por leer y será hasta una próxima oportunidad.
11:32:23 pm
Hola Xadabu
Tu solición está excelente, me estoy iniciando en JavaScript y tengo un problema con este código…
No puedo recuperar los datos de los campos que se generaron.
Como puedo solucionar ésto?
te anexo el codigo, de antemano muchas Gracias
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Formulario</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<script language=”JavaScript”>
<!–
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName==”Netscape”)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// –>
</script>
<!–<SCRIPT language=JavaScript>
<!–
var message=”La copia está prohibida”; //protect from right-click
function click(mouse) {
if (document.all) {
if (event.button==2||event.button==3) {
alert(message);
return false;
}
}
if (document.layers) {
if (mouse.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MouseDown); //protect from keyboard keypress
function keypressed() {
alert(“Tecla no permitida”);
}
}
document.onmousedown=click;
document.onkeydown=keypressed;
// –>
</SCRIPT>–>
<script language=”javascript”>
function Combos(x) {
ItDepend=document.getElementById(‘CombDependiente’);
if(!ItDepend){return;}
var mitems=new Array();
mitems[‘Elige’]=[”];
mitems[‘Supervisor 1’]=[‘Elegir opción’,’Cuadrilla 01-01′,’Cuadrilla 01-02′,’Cuadrilla 01-03′,’Cuadrilla 01-04′,’Cuadrilla 01-05′];
mitems[‘Supervisor 2’]=[‘Elegir opción’,’Cuadrilla 02-01′,’Cuadrilla 02-02′,’Cuadrilla 02-03′,’Cuadrilla 02-04′,’Cuadrilla 02-05′];
mitems[‘Supervisor 3’]=[‘Elegir opción’,’Cuadrilla 03-01′,’Cuadrilla 03-02′,’Cuadrilla 03-03′,’Cuadrilla 03-04′,’Cuadrilla 03-05′];
mitems[‘Supervisor 4’]=[‘Elegir opción’,’Cuadrilla 04-01′,’Cuadrilla 04-02′,’Cuadrilla 04-03′,’Cuadrilla 04-04′,’Cuadrilla 04-05′];
mitems[‘Supervisor 5’]=[‘Elegir opción’,’Cuadrilla 05-01′,’Cuadrilla 05-02′,’Cuadrilla 05-03′,’Cuadrilla 05-04′,’Cuadrilla 05-05′];
ItDepend.options.length=0;
ItActual=mitems[x.options[x.selectedIndex].value];
if(!ItActual){return;}
ItDepend.options.length=ItActual.length;
for(var i=0;i<ItActual.length;i++) {
ItDepend.options[i].text=ItActual[i];
ItDepend.options[i].value=ItActual[i];
}
}
</script>
<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 agregarUsuario(){
/* 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(“tablaUsuarios”).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=”<td><input type=’text’ size=’15’ name=’poste1[“+posicionCampo+”]’ ></td>”;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=”<td> <input type=’text’ size=’15’ name=’poste2[“+posicionCampo+”]’ ></td>”;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=”<td> <input type=’text’ size=’15’ name=’metros[“+posicionCampo+”]’ ></td>”;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=”<td> <input type=’text’ size=’15’ name=’tipo[“+posicionCampo+”]’ ></td>”;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=”<td> <input type=’text’ size=’15’ name=’espira[“+posicionCampo+”]’ ></td>”;
nuevaCelda=nuevaFila.insertCell(-1);
nuevaCelda.innerHTML=”<td> <input type=’text’ size=’15’ name=’catenaria[“+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=’button’ value=’Eliminar’ onclick=’eliminarUsuario(this)’></td>”;
/* 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);
}
/* presentaremos la lista de los elementos capturados en los postes
function leerUsuario{
for (i=1;i<posicionCampo;i++)
{
document.write(“Posición ” + i + ” del array: <BR>” );
document.write(“de ” + poste1[i] + ” a ” + poste2[i] + ” fueron ” + metros[i] + ” metros”);
document.write(“<br>”);
}
}
/* Cerramos el código Javascript */
</script>
</head>
<body leftmargin=0 topmargin=0 marginheight=”0″ marginwidth=”0″ bgcolor=”#ffffff”>
<!– ********** –>
<BR><BR>
<?php if (!isset($_POST[‘email’])) { ?>
<form name=”frm” action=”<?=$_SERVER[‘PHP_SELF’]?>” method=”post”>
<CENTER><h3>Información sobre trabajo de los Supervisores<BR>y sus Cuadrillas</h3>
<TABLE BORDER=”0″ WIDTH=”90%” CELLPADDING=”0″ CELLSPACING=”0″>
<TR>
<TD>Fecha: </TD><TD> <input name=”domicilio” type=”text” id=”domicilio” /></TD>
</TR>
<TR>
<TD>Colonia: </TD>
<TD> <input name=”colonia” type=”text” id=”colonia” SIZE=”25″ /></TD>
<!–</TR>
<TR>–>
<TD>Municipio: </TD>
<TD> <input name=”municipio” type=”text” id=”municipio” SIZE=”25″ /></TD>
</TR>
<TR>
<TD>Identidad: </TD>
<TD> <input name=”identidad” type=”text” id=”identidad” SIZE=”25″ /></TD>
<!– </TR>
<TR>–>
<TD>Central: </TD>
<TD> <input name=”central” type=”text” id=”central” SIZE=”25″ /></TD>
</TR>
<TR>
<TD>Distrito: </TD>
<TD> <input name=”Distrito” type=”text” id=”distrito” SIZE=”25″ /></TD>
<!– </TR>
<TR>–>
<TD>No. de Plano: </TD>
<TD> <input name=”plano” type=”text” id=”plano” SIZE=”25″ /></TD>
</TR>
<TR>
<TD>Cantidad de cable a proyectar: </TD>
<TD> <input name=”cab_proy” type=”Text” id=”cab_proy” SIZE=”25″ /></TD>
<!– </TR>
<TR>–>
<TD>Levantamiento Físico: </TD>
<TD> <input name=”fisico” type=”text” id=”fisico” SIZE=”25″ /></TD>
</TR>
<BR><BR>
<TR>
<TD>. </TD>
<TD> . </TD>
</TR>
<TR>
<TD>. </TD>
<TD> . </TD>
</TR>
<TR>
<TD> <label for=”or”>ID Supervisor:</label> </TD>
<TD>
<select name=”or” id=”or” onchange=”Combos(this)”>
<option value=”Elige”>Elige</option>
<option value=”Supervisor 1″>Supervisor 1</option>
<option value=”Supervisor 2″>Supervisor 2</option>
<option value=”Supervisor 3″>Supervisor 3</option>
<option value=”Supervisor 4″>Supervisor 4</option>
<option value=”Supervisor 5″>Supervisor 5</option>
</select>
</TD>
<!– </TR>
<TR>–>
<TD><label for=”CombDependiente”>Que Cuadrilla Reporta?</label> </TD>
<TD>
<select name=”CombDependiente” id=”CombDependiente”>
</select>
</TD>
</TR>
<TR>
<td align=”right”>
<input type=”button” onClick=”agregarUsuario()” value=”Añadir lectura” >
</td>
<TR>
</TABLE><BR>
<table id=”tablaUsuarios”>
<tr>
<td width=”175″>Poste 1</td>
<td width=”175″>Poste 2 </td>
<td width=”100″>Metros</td>
<td width=”100″>Tipo Cable</td>
<td width=”100″>Espira</td>
<td width=”100″>Catenaria</td>
<td width=”100″>Acciones</td>
</tr>
</table>
<input type=”button” onClick=”leerUsuario”
value=”terminar”>
<!–<input type=”reset” value=”borrar” /><input type=”submit” value=”enviar” />–>
</CENTER>
<!–<p>Nombre de Usuario: <input name=”usuario” type=”text” id=”usuario” /></p>
<p>Contraseña: <input name=”contra” type=”text” id=”contra” /></p>
<p></p>
<p> </p>–>
</form>
<!– <?php }else{
// la variable mensaje almacena el contenido del email (los datos del formulario)
// la variable subject indica el asunto que tendrá nuestro mensaje
// y con la función mail enviamos el mensaje, los parámetros son: dirección de envio, asunto, mensaje, cabeceras (en mi caso pongo el remitente).
$msg= “”;
$msg= “Reporte de Supervisor y sus cuadrillas desde el Centro CaCerti para Helicom”;
$msg.= “\nNombre: “. $_POST[‘nombre’];
$msg.= “\nApellido: “. $_POST[‘apellido’];
$msg.= “\nProyecto: “. $_POST[‘cp’];
$msg.= “\nFecha: “. $_POST[‘domicilio’];
$msg.= “\nMetros Instalados: “. $_POST[‘ciudad’];
$msg.= “\n “. $_POST[‘pais’];
$msg.= “\nEmail: “.$_POST[‘email’];
$msg.= “\n “. $_POST[‘telefono’];
$msg.= “\nId Supervisor: “. $_POST[‘or’];
$msg.= “\nID Cuadrilla: “. $_POST[‘CombDependiente’];
$msg.= “\nMensaje: \n”.$_POST[‘mensaje’];
$remitente = $_POST[‘email’];
$subject = “el Centro CaCerti Reporta al Supervisor : “.$_POST[‘nombre’].” “.$_POST[‘apellido’];
mail(“jpopulos1@hotmail.com“, $subject, $msg, “FROM: $remitente”);
echo “ ID Supervisor: <B>”;
echo $_POST[‘or’];
echo “</B><BR> Cuadrilla: <B>”;
echo $_POST[‘CombDependiente’];
echo “</B><BR>”;
?>–>
<!–// una vez se haya enviado el email correctamente, aparecerá un texto personalizable para que el usuario sepa que ha llegado bien a su destino : )–>
<BR><FONT FACE=”Verdana” SIZE=”3″ COLOR=”#000000″>
Se ha enviado el Reporte <BR>
y se ha anexado a la Base de Datos para validación<BR><BR>
</B>.<br><BR>
Presione <A HREF=”in_01.htm”>aqui</A> para regresar a la página principal.<BR>
</FONT>
<? } ?>
<BR><BR>
</FONT>
<BR><BR>
</body>
</html>
6:34:39 pm
oye xabadu, esta interezante el script, pero quiero usarlo para que un administrador de una pagina pueda generar xml q tomara un flash, es decir con este script el administrador genera tantos renglones como necesite, modificado el script para que pueda hacer un examinar y subir un archivo en una columna verda, pero no tengo ni idea de como hacerle en php para q tome cada uno de esos campos y los grabe en un archivo xml que debe generar y dejarlo en el host, se q debe de tener permisos la carpeta verdad XD help… de ante mano gracias…
6:16:35 pm
jajaja ya no te apures, lo logre hacer con un for, en el cual armo el string con el nombre que tendria la variable enviada y lo mando a escribir, gracias de todas maneras…
7:18:24 pm
el codigo en si funciona, pero los php no toma los valores de los arrays, debe faltar alguna funcion de javascript que tome el valores de cada input y los envie con el formulario, para los demas que quieren implementar este codigo, como recomendacion si no saben javascript no lo utilicen, solo agrega las filas, pero los datos no son enviados asi que no gasten su energia, por lo demas el encargado parece que se fue de alrgas vacaciones y no va a agregar lo que falta,saludos
10:02:21 pm
bueno despues de 5 dias de tratar de arreglar el codigo que nos dio el amigo, he logrado arreglarlo, ajajaja es tan simple como cambiar las comillas dentro del input, en vez de esto: “”;
tiene que ir esto: ”
prueben con un print_r($_POST) y veran como funciona! todos por unas comillas xD corrijo el post anterior
10:04:16 pm
vez de esto:
[“”;]
tiene que ir esto: [”;]
no salio en el anterior xD
10:05:51 pm
vez de esto:
nuevaCelda.innerHTML=””;
tiene que ir esto: nuevaCelda.innerHTML=”;
3:02:48 pm
jajaj el script si sirve tal cual, solo agregue codigo para q me cree un tipo hidden donde mando el valor incrementado y en el php armo el nombre de la variable en un ciclo y hago con ella lo q desee hacer…
1:11:28 pm
o mas facil, le cambias las comillas simples de la funcion en html por comillas dobles y las dobles por simples y lo recorres con un array y listo
2:36:31 pm
No logro que me funcione … alguien puede poner el código para captuar estos datos completo.
Yo lo tengo así:
// el del form:
nuevaCelda.innerHTML=”;
// el de php
$material_apli1 = $_POST[‘material[0]’];