Fondo código

Formulario de redirección a diferentes URL

Si necesita crear un formulario HTML que -de acuerdo con la selección- envíe a sus usuarios a una u otra página web, este artículo es el que está buscando.

Para este caso, se utiliza el elemento select, que permite crear una lista de opciones, que luego serán parametrizadas a través de un código en JavaScript.

Es necesario indicar que existen otros caminos (líneas de código) para lograr la misma solución. Todo depende del estilo del programador, los recursos con los que cuenta el servidor, las características del sitio web (framework), entre otras consideraciones.

La siguiente solución está orientada para creadores de contenidos que tienen conocimientos básicos en HTML y JS. Solo hace falta estar concentrado para lograr la configuración correcta.

Comencemos.

Diseño de la idea

Para este caso se propone crear un formulario donde el usuario puede ser enviado a cuatro sitios web diferentes. Estos cuatro sitios están clasificados en dos categorías, así:

Categoría uno: Propio.
Categoría dos: Externo.

Enlace uno, categoría uno: Blog.
Enlace dos, categoría dos: Diccionario TIC.

Enlace uno, categoría dos: YouTube.
Enlace dos, categoría dos: Twitter.

Para hacerse una mejor idea del recurso, puede ver formulario en esta página.

Crear el formulario HTML

El primer paso es insertar el formulario en la página web donde interactúa el usuario. El código es:

<form name="listado" action="index.html" method="post" >
<select name="nombreCategoria" onchange="subCategoria();" > <option value="">Dominio</option> </select>
<select id="envio" name="envio" onchange="SelectRedirect();"> <option value="">Web</option> </select>
</form>

En este código se identifica un formulario con dos elementos de selección. Cada elemento de selección tiene una opción por defecto ("Dominio" y "Web") que no afectan los resultados de navegación, son solo etiquetas que sirven para orientar al usuario.

Hay que tener presente que cualquier cambio que se realice en este código debe actualizarse en el archivo JS, que se presenta más adelante.

Cargar archivo y función JS

En el head del documento se realiza un llamado al documento JavaScript. Para ello se inserta la línea:

<script language="javascript" src="listadoURL.js"></script>

Luego, en el body del documento se realiza la carga de la función categoria(), que está expresada al inicio del archivo que acaba de llamarse.

El body debe quedar así:

<body onload="categoria();"> 

Código JS del formulario

Sin duda, esta es la parte más extensa y de mayor cuidado en el trabajo.

// JavaScript Document
function categoria(){
addOption(document.listado.nombreCategoria, "categoriaUno", "Propio", "");
addOption(document.listado.nombreCategoria, "categoriaDos", "Externo", "");
}

function subCategoria() {
removeAllOptions(document.listado.envio);
addOption(document.listado.envio, "", "Web", "");
if(document.listado.nombreCategoria.value == 'categoriaUno'){
addOption(document.listado.envio,"propioBlog", "Blog");
addOption(document.listado.envio,"propioDiccionarioTIC", "Diccionario TIC");
}
if(document.listado.nombreCategoria.value == 'categoriaDos'){
addOption(document.listado.envio,"externoYouTube", "YouTube");
addOption(document.listado.envio,"externoTwitter", "Twitter");
}
}

function removeAllOptions(selectbox) {
var i;
for(i=selectbox.options.length-1;i>=0;i--) {
//selectbox.options.remove(i);
selectbox.remove(i);
}
}

function addOption(selectbox, value, text ) {
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value; selectbox.options.add(optn);
}
function redireccion() {
switch(document.listado.envio.value) { case "propioBlog":
window.location="http://e-lexia.com";
break; case "propioDiccionarioTIC":
window.location="http://e-lexia.com/diccionario-tic";
break;
case "externoYouTube":
window.location="https://youtube.com/user/juanca826";
break;
case "externoTwitter":
window.location="https://twitter.com/juancadotcom";
break;
default:
window.location="../";
break;
} }

Siguiendo las instrucciones del head, el código anterior se guarda en el archivo listadoURL.js.

¿Necesitas asesoría en comunicación digital?

Diseña y optimiza tus proyectos en comunicación digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.
Conversemos

Explicación del código

En palabras sencillas, el código JavaScript funciona así:

La función categoria() define el primer grupo. Para este ejemplo, "Propio" y "Externo" son las opciones.

function categoria(){
addOption(document.listado.nombreCategoria, "categoriaUno", "Propio", "");
addOption(document.listado.nombreCategoria, "categoriaDos", "Externo", "");
}

Luego, la función subCategoria() define las posibles opciones para cada una de las categorías. Cada subcategoría es expresada de manera independiente y sus opciones se definen después de un condicional.

function subCategoria() {
removeAllOptions(document.listado.envio);
addOption(document.listado.envio, "", "Web", "");
if(document.listado.nombreCategoria.value == 'categoriaUno'){
addOption(document.listado.envio,"propioBlog", "Blog");
addOption(document.listado.envio,"propioDiccionarioTIC", "Diccionario TIC");
}
if(document.listado.nombreCategoria.value == 'categoriaDos'){
addOption(document.listado.envio,"externoYouTube", "YouTube");
addOption(document.listado.envio,"externoTwitter", "Twitter");
}
}

Para el caso de este artículo, las opciones de la categoría "Propio" son: "Blog" y "Diccionario TIC", y para la categoría "Externo", "YouTube" y "Twitter".

Sobre el final del documento, la función redireccion() se encarga de identificar las cuatro posibles combinaciones y asignar un enlace de destino a cada una de ellas.

function redireccion() {
switch(document.listado.envio.value) {
case "propioBlog":
window.location="http://e-lexia.com";
break;
case "propioDiccionarioTIC":
window.location="http://e-lexia.com/diccionario-tic";
break;
case "externoYouTube":
window.location="https://youtube.com/user/juanca826";
break;
case "externoTwitter":
window.location="https://twitter.com/juancadotcom";
break;
default:
window.location="../"
break;
}
}

En caso de querer ampliar los casos, se pueden insertar nuevas líneas antes del código:

default:
window.location="../"
break;

Por cierto, esta línea sirve para indicar una URL de destino en caso que no ocurre ninguna de las combinaciones anteriores.

Agregar más datos al formulario

El código puede personalizarse a la medida: se pueden agregar nuevas categorías y subcategorías, y ajustar los casos y URL, procurando siempre conservar la integridad -especialmente- del archivo JavaScript.

Por último, indico que este código es una adaptación del recurso disponible en Redirecting page to different location after selection of dropdown listbox in JS

¿Tienes una pregunta sobre el artículo? Cuéntanos en los comentarios. Además, si buscas información sobre un tema y no está disponible, anótalo a continuación para agregarlo a nuestra agenda de contenidos.

Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi

Apoya la producción de la Escuela Digital desde PayPal.me

Con una taza de chocolate todo sabe mejor ¿Nos invitas a una?

¡Vamos por los 20.000 suscriptores en YouTube! Suscríbete

Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter

Licencia Creative Commons Formulario de redirección a diferentes URL por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional. Basada en una obra en https://e-lexia.com/blog.

4 respuestas a «Formulario de redirección a diferentes URL»

  1. Hola, también he tratado de reproducir tu código para una función similar, pero en WordPress. Utilizo un plugin para agregar fragmentos de código HTML a WordPress, solo que no entiendo bien los parámetros que tiene que recibir para que detecte mi formulario. ¿Podrías ayudarme con eso?

  2. hola he reproduccido tu codigo de redireccion web para varias opciones añadiendo algunas y no consigo hacer que funciones no se en que meto la pata me puedes ayudar

Responder a juancadotcom Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Icono de soporte y atención. Dirige al formulario de contacto de e-Lexia.com Contacto
Logo de e-Lexia.com: Regresar al inicio del sitio web Inicio