En esta ocasión comenzaremos una serie de ejemplos practicos de JavaScript. Se encuentra el codigo HTML completo. Es decir si deseas verlo en funcionamiento simplemente copia todo el codigo, abre Bloc de Notas y guarda como .HTML. Después lo abres con cualquier navegador y listo.
Descripción
Permite dependiendo de la opción seleccionada asignar el correo del destinatario correspondiente.
Funciones Utilizadas
- Value
- Radio Buttom
- Label
- TextBox
- If
- Funciones
- OnChange
Codigo
<HTML><HEAD>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<TITLE>*** Bienvenidos ***</TITLE>
<SCRIPT LANGUAGE = "javascript1.3">
onload=iniciar;
// procedimiento de inicialización
function iniciar()
{
// Asignar el valor por defecto
document.form1.txtdestinatario.value = "comercial@empresa.com.co";
}
function AsignarDestinatario()
{
// Contactar Departamento Comercial
if (document.form1.dpto[0].checked==true)
{
document.form1.txtdestinatario.value = "comercial@empresa.com.co";
}
// Contactar Departamento Tecnico
if (document.form1.dpto[1].checked==true)
{
document.form1.txtdestinatario.value = "dtecnico@empresa.com.co";
}
}
function UPTvalidateform(thisform)
{
}
</SCRIPT>
<STYLE type="text/css">
.style12
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
</STYLE>
</HEAD>
<BODY>
<FORM NAME = "form1" METHOD = "post" ACTION = "alert("Listo!");" onSubmit="return (!(UPTvalidateform(document.form1)));">
<BR><BR>
<LABEL CLASS="style12"><b>Destinatario</b> </LABEL>
<INPUT NAME = "txtdestinatario" type = "text" CLASS="style12" readonly="readonly">
<BR><BR>
<LABEL CLASS="style12"><b>Contactar a Departamento</b>
<BR>
<LABEL CLASS="style12">Comercial</LABEL>
<INPUT name="dpto" type="radio" value="Comercial" checked onChange="AsignarDestinatario()">
<LABEL CLASS="style12">Tecnico</LABEL>
<INPUT name="dpto" type="radio" value="Tecnico" onChange="AsignarDestinatario()">
<BR><BR>
<INPUT NAME="reset" TYPE = "reset" CLASS="style12" VALUE="Borrar">
<INPUT NAME="enviar" TYPE="submit" CLASS="style12" VALUE="Submit">
</FORM>
</BODY>
</HTML>
No hay comentarios:
Publicar un comentario