Linea de Codigo

Recuperar datos de un formulario con PHP Enero 3, 2010

Publicado por lineadecodigo en : PHP , 3 comentarios

Vamos a crear un código en PHP que nos permita recuperar los datos introducidos en un formulario y nos los muestre en pantalla.

El primer paso será el crear el formulario HTML que nos permita captar los datos del usuario. Este formulario tendrá dos campos de texto y un botón que nos permita enviarlo.

 
<form id="myform" action="recibir-parametros.php" method="GET">
label"><label for="p1">Primer parametro</label>
<input type="text" id="p1" name="p1"><br/>
label"><label for="p2">Segundo parametro</label>
<input type="text" id="p2" name="p2"><br/>
<input type="submit" value="Enviar Formulario"/>
</form>

En este punto es muy importante el valor de los atributos name, ya que serán los valores que demos a estos atributos, los que nos sirvan para recuperar lo que el usuario introduzca. En nuestro caso hemos datos los valores de p1 y p2. Que serán los que recuperemos.

Un segundo punto en el que tenemos que prestar atención es en atributo action. En dicho atributo tenemos que indicar el nombre del fichero PHP que procesará y recuperará los datos del formulario. El fichero que codificaremos más adelante se llamará recibir-parametros.php

El último punto importante del formulario será el tipo de envío de los parámetros. El tipo de envío se especifica mediante el atributo method y sus valores pueden ser POST o GET. Con POST los parámetros se pasan de forma oculta, mientras que con GET podemos ver los valores en la URL de petición. Dependiendo del método de envío que utilicemos necesitaremos utilizar un método u otro en nuestro código PHP.

Pasemos ya a codificar el fichero PHP. Este será sencillo. El método para recuperar datos de un formulario, cuando estamos pasando los parámetros mediante el método GET, es $_GET[]. El nombre del dato a recuperar se pasará como parámetro.

$_GET["p1"];
$_GET["p2"];

Ahora solo nos quedará el mostrarlo por pantalla. Para ello utilizamos la sentencia echo de la siguiente forma:

echo "El valor de p1 es ",  $_GET["p1"], "<br/>";
 echo "El valor de p2 es ",  $_GET["p2"];

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre PHP

Cambiar el valor de un radio group dinámicamente Septiembre 19, 2009

Publicado por lineadecodigo en : JavaScript , 4 comentarios

Agrupando elementos INPUT de tipo radio podemos crear un grupo de opciones, en las cuales el usuario solo pueda elegir una de ellas.

Esto se consigue asignando un único nombre (atributo name) a todos los elementos input radio. Así, podríamos construir un formulario para preguntar por el sexo del usuario:

 
<form id="myform">
<input type="radio" name="sexo" id="sexo_m"/ value="masculino">
label"><label for="sexo_m">Masculino</label><br/>
<input type="radio" name="sexo" id="sexo_f"/ value="femenino">
label"><label for="sexo_f">Femenino</label><br/>
</form>

Si tenemos valores sobre la información del usuario. Por ejemplo, si está modificando su información anterior, podemos tener la necesidad de cambiar el valor dinámicamente. En este caso, y de no poder crear el formulario de forma dinámica, podemos utilizar JavaScript para cambiar el valor de forma dinámica.

Para cambiar el valor utilizaremos, en primer lugar, la función .getElementById() para acceder al elemento INPUT del formulario. Es por ello que es muy importante el haberle dado un valor al atributo ID.

Cuando accedemos al elemento INPUT vemos que el atributo checked es el que nos informa si el elemento está chequeado o no.

 
document.getElementById('sexo_m').checked = true;

Los valores que puede tomar el atributo checked son true y false. Con la línea de código anterior lo que estamos haciendo es marcar el campo 'sexo_m' como activo.

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre JavaScript

Validar password con JavaScript Septiembre 1, 2009

Publicado por lineadecodigo en : JavaScript , Hasta ahora 1 comentario

Este ejercicio consiste en comprobar, de una forma sencilla, que la contraseña introducida en un formulario, dentro de dos campos distintos, cumple una serie de restricciones:

Ambas contraseñas deberán de coincidir.
No se podrá dejar ningún campo de los dos vacíos.
La cadena no podrá contener espacios en blanco .

Lo primero que haremos a la hora de crear el formulario será indicar que los campos de entrada deben de ser INPUT del tipo password

label"><label for="passwd">Introduzca la contraseña:</label>
<input type="password" id="passwd" size="20">

Con lo que respecta a la validación, se debe de hacer en cuanto el usuario quiera enviar el formulario. Es decir, deberemos de detectar el evento onSubmit. Dentro de este evento ejecutaremos la función de validación, dicha función retornará verdadero si se cumplen todos los requisitos, sino se retornará falso.

 
<form name="form1" method="POST" onSubmit="return validarPasswd()" action="enviar.php">

Ahora empezaremos a codificar la función Javascript que realice la validación. En este caso es la función "validarPasswd", la cual llamamos desde el onSubmit.

Hay que decir que tenemos diferentes formas de realizar esta validación. La más rápida sería con el uso de patrones. Pero en nuestro caso y orientándolo a un desarrollo muy básico vamos a realizarlo con estructuras básicas del lenguaje.

Para acceder al valor de los campos vamos a utilizar la función .getElementById. Esta función recibe como parámetro el ID que le hayamos dado a los campos INPUT del formulario. Es por ello que deberemos de revisar el valor de los atributos ID.

var p1 = document.getElementById("passwd").value;
var p2 = document.getElementById("passwd2").value;

Ahora pasaremos a realizar las diferentes validaciones

Que no haya espacios en blanco

Recorremos la cadena mediante un bucle iterativo y con una variable de guarda. En el caso de que encontremos un carácter en blanco, cambiamos el valor de la variable de guarda.

var espacios = false;
var cont = 0;
 
while (!espacios && (cont < p1.length)) {
  if (p1.charAt(cont) == " ")
    espacios = true;
  cont++;
}
 
if (espacios) {
  alert ("La contraseña no puede contener espacios en blanco");
  return false;
}

Que no nos hayan dejado un campo vacío

Para ello comprobaremos que el tamaño es mayor de 0. El tamaño de una cadena lo conseguimos con el atributo .length

if (p1.length == 0 || p2.length == 0) {
  alert("Los campos de la password no pueden quedar vacios");
  return false;
}

Que ambas contraseñas coincidan

En este caso comprobaremos que el contenido de las variables es el mismo:

if (p1 != p2) {
  alert("Las passwords deben de coincidir");
  return false;
} else {
  alert("Todo esta correcto");
  return true;
}

Ahora, ¿Te atreves a realizarlo con patrones?

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre Javascript

Contar caracteres y palabras en JavaScript Marzo 5, 2008

Publicado por lineadecodigo en : JavaScript , 13 comentarios

Cuando ofrecemos un área de texto puede darse el caso que tengamos un límite de los caracteres a ser introducidos. En este caso sería bueno el irle ofreciendo al usuario el número de caracteres que se han insertado, y de paso las palabras.

Lo primero que vamos a hacer es crear un área de texto en HTML mediante el elemento TEXTAREA.

<FORM ID="formulario" ACTION="#">
<TEXTAREA ID="area" COLS=20 ROWS=10>
Texto dentro del área de texto </TEXTAREA><BR>
<INPUT TYPE="button" VALUE="Contar las palabras" onClick="wordCount();">
</FORM>

Dentro del formulario incluimos un botón, que al ser pulsado invocará al método wordCount(), el cual contiene todo el código del ejemplo para contar caracteres y palabras en JavaScript.

Dentro del método wordCount lo primero será obtener el texto del área de texto (valga la redundancia). Esto lo haremos mediante el método getElementById

textoArea = document.getElementById("area").value;

Una vez que tenemos el texto el número de caracteres lo obtenemos mediante la longitud del mismo (propiedad length).

umeroCaracteres = texto.length;

Lo siguiente es contar las palabras que tiene dicho texto. Para poder hacer esto utilizaremos la función split la cual TROCEA una cadena en subcadenas tomando como carácter de corte el que le pasemos como parámetro, y dejándonos el resultado en un array de palabras.

textoAreaDividido = textoArea.split(" ");
numeroPalabras = textoAreaDividido.length;

Lo más normal es pensar que contando la longitud del array de palabras tendremos la solución. Pero existen algunos casos que debemos de considerar:

Que exista un blanco al principio del texto.
Que exista un blanco al final del texto.
Que existan varios blancos seguidos.

En los dos primeros casos lo que tendremos que hacer es eliminar los espacios en blanco y en el tercer caso deberemos de reducir los X blancos en uno solo. Las cosas serian más fáciles si contásemos con funciones del estilo trim, ltrim o rtrim. Pero en JavaScript no es el caso.

Para solucionar esto deberemos de recurrir a las expresiones regulares y a la función replace. Deberemos de crear expresiones regulares que simulen las excepciones y aplicar un replace (por nada en el primer y segundo caso y por un espacio en el tercer caso).

Las expresiones regulares que simulan las excepciones son:

primerBlanco = /^ /
ultimoBlanco = / $/
variosBlancos = /[ ]+/g

Una vez aplicadas las excepciones al texto haremos el split y contaremos la longitud.

texto = texto.replace (variosBlancos," ");
texto = texto.replace (primerBlanco,"");
texto = texto.replace (ultimoBlanco,"");
textoTroceado = texto.split (texto, " ");
numeroPalabras = textoTroceado.length;

Actualización 20.junio.09:
El orden de ejecución para la eliminación de blancos será variosBlancos, primerBlanco y ultimoBlanco. Ya que si ejecutamos variosBlancos al final podemos tener un inicio o fin de cadena con varios espacios en blanco que no controlemos.

Visualizar el ejemplo
|- Descargar el código
|- Descargar del SVN
|- Reportar un error del código

|- Foro sobre JavaScript

Contar checkbox activos con JavaScript Febrero 8, 2008

Publicado por lineadecodigo en : JavaScript , 10 comentarios

Acceder a la información almacenada en el DOM de nuestra página nos sirve para llevar a cabo ejemplos como este. En este caso, el ejemplo consiste en contar los checkbox que hay seleccionados dentro de un formulario.

Un caso práctico será el controlar que el usuario ha marcado un número de opciones en concreto dentro de un formulario. Es decir, que si no ha seleccionado más de 3 opciones, no pueda enviar el formulario.

En nuestro caso vamos a tener un formulario con 10 checkbox y un botón.

(más...)

Condicionar partes de un formulario Enero 4, 2008

Publicado por lineadecodigo en : wForms , 5 comentarios

Con wForms además de poder hacer un sin fin de validaciones de una forma sencilla, también podemos condicionar partes el formulario, de tal manera que dependiendo de un valor de un campo, tengamos acceso a otra parte o directamente que no nos la muestre.

En nuestro caso, para demostrar su utilidad, vamos a crear un formulario con un checkbox, el cual al activarlo permita seguir insertando datos del formulario. En primer lugar pondremos los datos del usuario y en la parte condicionada los datos de la tarjeta. Que solo se ofrecerán al usuario si este los requiere.

(más...)

Borrado de campos en XForms Noviembre 25, 2007

Publicado por lineadecodigo en : XForms , Añadir un comenario

Hace ya tiempo, cuando aprendí a construir formularios con HTML, me hacía mucha gracia que todos los formularios que veía por Internet tenían dos botones. El primero era el que realizaba el envío de la información, mientras que el segundo te borraba el contenido de todo el formulario.

Esta claro que no voy a cuestionar la utilidad de los dos botones, ya que útiles son. Pero quién no le ha dado al botón de borrar en vez de enviar, cuando realmente lo que quería era enviar y no borrar. Seguro que a todos nos ha pasado alguna vez y nos hemos visto en la tesitura de volver a introducir todos los datos.

En la especificación de XForms ¡han eliminado al componente “input type reset”¡..... Pero no del todo. La verdad es que ha dejado de ser un control y ha pasado a ser un “evento de interacción”..... ¿Cómo?

Intentare explicarlo... La idea es que los eventos de interacción sean los que correlacionen los eventos con el modelo de datos de XForms. Dentro de la categoría de eventos de interacción tenemos, además del "reset", "next" para cuando pasamos al siguiente control del formulario , "previous" cuando hacemos lo mismo, pero hacía atrás, "focus" para cuando queremos hacer foco en un determinado control,.....

Vale, pero yo quiero poner mi botón de toda la vida en el formulario,......

Lo primero que tenemos que hacer es construir un modelo de datos. Para este ejemplo tampoco nos vamos a inventar un mega-modelo. Hagamoslo sencillo:

<model id="mipersona">
   <instance>
<persona xmlns="">
       <nombre></nombre>
       <apellido></apellido>
       <edad></edad>
       <domicilio></domicilio>
     </persona>
   </instance>
</model>

Si os dais cuenta, los campos del modelo están vacíos. Y es que el evento de interacción reset no borra los campos, sino que lo que hace es volver a poner en el formulario el modelo inicial.

Vamos con el siguiente paso, construyamos el formulario. Para ello nos basamos en dos componentes sencillos: input y textarea. De ellos solo tienes que darte cuenta que para hacer referencia a un campo del modelo usan el atributo ref. El código nos quedaría algo así:

 
<input ref="/persona/nombre">
  <label>Persona: </label>
</input>
 
<h:br/>
<input ref="/persona/apellido">
  <label>Apellido: </label>
</input>
 
<h:br/>
<input ref="/persona/edad">
  <label>Edad: </label>
</input>
 
<h:br/>
 
<textarea ref="/persona/domicilio">
   <label>Domicilio: </label>
</textarea>

Y ahora llega lo más importante.... Nuestro botón de borrado... Para poner un botón tenemos que usar el componente trigger.

Dentro de este componente es donde pondremos nuestro evento de interacción. La etiqueta del elemento es reset y como atributos tendremos dos: el evento que lo activa que será DOMActivate . El evento DOMActivate viene a reflejar la acción por defecto sobre un control, en nuestro caso pulsar el botón. En el caso de que fuese una caja de texto, la acción por defecto sería pulsar "Intro".

El segundo atributo del reset es el modelo que tiene que resetear. Ya que podemos tener varios modelos en nuestra página.....

 
<trigger>
   <label>Borrar</label>
   <reset ev:event="DOMActivate" model="mipersona"/>
</trigger>

Bueno, al final, tampoco ha sido tan difícil....

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre XForms

Mi primer formulario XForms Noviembre 24, 2007

Publicado por lineadecodigo en : XForms , 3 comentarios

XForms, otra tecnología X*. Un amigo mío dice, en broma, que toda tecnología que evoluciona el W3C le pega la X. Ya lo hizo al evolucionar su HTML al XHTML, las Querys al XQuery y claro está los formularios (Form) a XForms. Vamos, que podríamos decir que estamos delante de una verdadera generación X.

¿Qué es XForms?

XForms como reza su página del W3C es “the next generation of web forms”.... la nueva generación de formularios web. Y es que los formularios HTML se nos habían quedado pequeños y había que acometer dos cosas sobre ellos:

Separar el modelo de datos del formulario y su diseño visual
Dotar de mayor potencia a los formularios: funciones de trabajo sobre ellos, nuevos componentes visuales,...

De las dos cosas mencionadas, la primera es la más importante. Separación de los datos de la presentación. Es por ello que se crea un conjunto de componentes visuales que pueden ser usados dentro de un documento XHTML o cualquier otro documento XML.

Por otro lado se define el concepto de instancia de datos. Esto es un modelo de datos que viene a reflejar la estructura de datos que se va a manejar. Estos datos son los que realmente se van a intercambiar.

Estas dos cosas: controles de formulario y la instancia de datos son ligados mediante un procesador XForms el cual define como se envía y recibe datos.

Mi primer formulario

Pongámonos manos a la obra y construyamos nuestro primer formulario basado en XForms. El movimiento se demuestra andando....Lo primero que tenemos que saber es que vamos a construir un documento XHTML.

<h:html xmlns:h="http://www.w3.org/1999/xhtml">
 <h:head>
   <h:title>Mi primer formulario XForms</h:title>
 </h:head>
 <h:body>
 
 ...
 
 </h:body>
</h:html>

Si os fijáis en el código. El namespace escogido en mi ejemplo para el XHTML> es h. Esto nos permitirá diferenciarlo de las etiquetas XForms.

Lo siguiente que tenemos que hacer es incluir el namespace de XForms. Este, está definido en http://www.w3.org/2002/xforms

<h:html xmlns:h="http://www.w3.org/1999/xhtml"
   xmlns="http://www.w3.org/2002/xforms">

En nuestro ejemplo vamos a poner un formulario de búsqueda. No nos vamos a complicar más la vida. Dentro de este formulario pondremos dos campos de entrada de texto y un botón que lance la búsqueda.

Lo más interesante de los XForms es que HA DESAPARECIDO LA ETIQUETA FORM.

Para añadir los campos de entrada de texto tenemos el elemento input:

 
<input>
  <label>Nombre:</label>
</input>
 
<h:br/>
<input>
 <label>Apellido:</label>
</input>

Dentro de la etiqueta input podemos encontrar dos elementos

Label: Para indicar el nombre que se antepondrá al campo de entrada
Hint: Que es una etiqueta de texto emergente que nos servirá de aviso.

Para añadir el botón de búsqueda tendremos que trabajar con el elemento submit. Este elemento tiene asociado un atributo que es submission, el cual enlazará con una acción de envío.

<submit submission="busqueda">
  <label>Buscar</label>
</submit>

Enlazando el formulario con el modelo de datos

Como hemos dicho en la introducción. XForms separa los datos de la presentación. El modelo de dato se define dentro de la etiqueta model. Y un modelo contendrá una instancia del mismo (definida por el elemento instance), la cual contendrá los datos.

Veamos como quedaría nuestro formulario con el nombre y apellido como modelo:

<model>
  <instance>
    <data xmlns="">
      <nombre>Victor</nombre>
      <apellido>Cuervo</apellido>
    </data>
  </instance>
</model>

Si queremos hacer referencia a algún elemento del modelo desde los controles visuales lo haremos mediante el atributo ref. Así nuestros componentes visuales quedarían de la siguiente forma:

 
<input ref="nombre">
 <label>Nombre:</label>
</input>
 
<h:br/>
<input ref="apellido">
 <label>Apellido:</label>
</input>

Dentro del modelo también tendremos la acción desencadenada por el componente gráfico submit. El elemento que tiene la acción es submission.

<submission action="http://example.com/buscar" method="post" id="buscar"/>

Este elemento tiene múltiples atributos, pero entre ellos destacamos tres:

action, que define la URI donde se enviarán los datos.
method, que indica que tipo de protocolo se va a utilizar para la serialización de datos: post, get,...
id, identificador que lo hace único y que será usado por el elemento submit para identificar la acción de búsqueda a usar.

Visualizar nuestro trabajo: plug-in para Mozilla

Solo nos quedará por guardar nuestro ejemplo como .xhtml y probarlo.

Para probar el XForms con Mozilla y FireFox hay que descargarse un plug-in https://addons.mozilla.org/firefox/824/ que nos servirá para nuestros ejemplos.

Otros interpretes de XForms están disponibles en http://www.w3.org/MarkUp/Forms/#implementations

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre XForms

Validar que el campo es un email Agosto 28, 2007

Publicado por lineadecodigo en : wForms , 3 comentarios

Uno de los campos más comunes, cuando hacemos formularios web, es el de la dirección de e-mail. Imaginemos un alta de usuario, un libro de visitas, una respuesta en un blog,... Y lo más normal será que enviemos algún correo a dicha dirección en un momento posterior.

(más...)

Linea de Codigo

Categorías

Línea de Código en las Redes Sociales

Entradas Recientes

Enlaces

Java

Programacion

Ultimas preguntas de los foros

Y que contamos en aulambra.com

Archivo

Meta

Feeds

Recuperar datos de un formulario con PHP Enero 3, 2010

Cambiar el valor de un radio group dinámicamente Septiembre 19, 2009

Validar password con JavaScript Septiembre 1, 2009

Que no haya espacios en blanco

Que no nos hayan dejado un campo vacío

Que ambas contraseñas coincidan

Contar caracteres y palabras en JavaScript Marzo 5, 2008

Contar checkbox activos con JavaScript Febrero 8, 2008

Condicionar partes de un formulario Enero 4, 2008

Borrado de campos en XForms Noviembre 25, 2007

Mi primer formulario XForms Noviembre 24, 2007

¿Qué es XForms?

Mi primer formulario

Enlazando el formulario con el modelo de datos

Visualizar nuestro trabajo: plug-in para Mozilla

Validar que el campo es un email Agosto 28, 2007

Linea de Codigo

Categorías

Línea de Código en las Redes Sociales

Entradas Recientes

Etiquetas

Enlaces

Java

Programacion

Ultimas preguntas de los foros

Y que contamos en aulambra.com

Archivo

Meta

Feeds

Recuperar datos de un formulario con PHP Enero 3, 2010

Cambiar el valor de un radio group dinámicamente Septiembre 19, 2009

Validar password con JavaScript Septiembre 1, 2009

Que no haya espacios en blanco

Que no nos hayan dejado un campo vacío

Que ambas contraseñas coincidan

Contar caracteres y palabras en JavaScript Marzo 5, 2008

Contar checkbox activos con JavaScript Febrero 8, 2008

Condicionar partes de un formulario Enero 4, 2008

Borrado de campos en XForms Noviembre 25, 2007

Mi primer formulario XForms Noviembre 24, 2007

¿Qué es XForms?

Mi primer formulario

Enlazando el formulario con el modelo de datos

Visualizar nuestro trabajo: plug-in para Mozilla

Validar que el campo es un email Agosto 28, 2007