Formulario a correo

En este pequeño script se ilustra como enviar un correo con los datos recogidos en un formualrio usando solo Javascirpt.

El script comprobará que al menos una de las opciones está seleccionada y enviará el correo (mediante el cliente de correo del usuario)

Si no hay ninguna opción seleccionada emitirá un alerte advirtiéndolo y no enviará el mail

Solución

<script>

function Comprobar(obj){

  if ( !obj.Opciones[0].checked &&

     !obj.Opciones[1].checked &&

     !obj.Opciones[2].checked)

  {

       alert("Debe elegir una opción")

        return false;

  }

  return true

}

</script>

<body> 

<form name="form1" method="POST" onsubmit="return Comprobar(this)" action= "mailto:poneaquí@tuemail?subject=asunto" enctype ="text/plain" >

<p>Campo de texto <input type="text" name="textfield" size="80"></p>

<p>Lista de selección </p>

<p><select name="select">

<option value="Valor 1" selected>Elemento 1</option>

<option value="Valor 2">Elemento 2</option>

<option value="Valor 3">Elemento 3</option>

</select></p>

<p>Campos excluyentes </p>

Si <input type="radio" name="radio" value="Botón1">

No <input type="radio" name="radio" value="Botón2">

<p>Campos para opciones: </p>

<p>Opción 1

<input type="checkbox" name="Opciones" value="opc1">

Opción 2

<input type="checkbox" name="Opciones" value="opc2">

Opción 3

<input type="checkbox" name="Opciones" value="opc3"></p>

<p align="center">

<input type="reset" name="Reset" value="Borrar">

<input type="submit" name="Submit" value="Enviar">

</p>

</form>

</body>

Explicación

Esta función se usa para validar el formulario, aunque también podría hacer otras cosas. Para producción o algo más elaborado action podría llamar a un script php que realizara la acción que necesites.

Es llamada por el evento submit del formulario, como puedes ver en el código HTML. En este caso concreto si en el formulario no se ha seleccionado al menos una de las opciones la función devuelve falso y el formulario no se envía, en caso contrario todo sigue su curso y el formulario se envía.

La función recibe como argumento el objeto formulario y los valores de sus campos se identifican de la siguiente forma:                          obj.name_en_el_campo.value,
salvo en el caso de los checkbox y radiobutton que se identifican como elementos de un array seguidos de la propiedad checked que es true si está marcado o false si no lo está.

En el cuerpo de los mensajes enviados con este formulario recibirás en tu correo los valores de cada campo como pares campo=valor_del_campo.

Pruébalo y verás que simple resulta.

Como lo uso

 Aquí tienes el código HTML para poner en la sección <body> de la página donde coloques el formulario. Ya sabes: seleccionar, copiar y pegar.

Personalízalo a tu gusto. Contiene campos de texto, checkbox, radiobutton y menus desplegables.

En el campo action colocas la dirección e-mail donde quieras recibir el formulario, el campo ?subject=asunto es opcional, pero muy útil a la hora de filtrar la respuesta y enviarla a una carpeta determinada con tu programa de correo.

La clave de esta aplicación está en el evento submit, si la función colocada en ese evento devuelve true el formulario se envía y si devuelve false no se envía. Así de fácil.

Este ejemplo es útil con fines de aprendizaje, el envio de correos de esta manera es poco seguro (probablemente el navegador te advertirá de esto cuando pruebes el ejemplo).