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.

Juan Carlos Morales S., asesor en comunicación digital

¿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

Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi

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

¿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.

—

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

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

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

Diana Mera Ángeles dice:
abril 16, 2021 a las 1:32 pm
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?
Responder
1. juancadotcom dice:
  abril 17, 2021 a las 9:26 pm
  Hola, Diana. Gracias por el comentario. Realmente, no logro comprender muy bien. Tendría que revisar con detalle lo que estás implementando. Si quieres me contactas por mi cuenta Facebook: https://www.facebook.com/cccontenidos. Saludos
  Responder
darohe dice:
enero 2, 2021 a las 6:43 am
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
1. juancadotcom dice:
  enero 2, 2021 a las 8:48 pm
  Hola, Darohe. Gracias por tu comentario. Para poder apoyar con mayor precisión, envíame los archivos que estás trabajando a través del Facebook de mi marca: https://facebook.com/cccontenidos. Quedo atento. Saludos 🙂
  Responder

Deja una respuesta Cancelar la respuesta

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