{"id":1644,"date":"2019-01-21T15:18:05","date_gmt":"2019-01-21T20:18:05","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=1644"},"modified":"2024-11-01T11:36:15","modified_gmt":"2024-11-01T16:36:15","slug":"formulario-redireccion-diferentes-url","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/formulario-redireccion-diferentes-url\/","title":{"rendered":"Formulario de redirecci\u00f3n a diferentes URL"},"content":{"rendered":"<p>Si necesita crear un formulario HTML que -de acuerdo con la selecci\u00f3n- env\u00ede a sus usuarios a una u otra p\u00e1gina web, este art\u00edculo es el que est\u00e1 buscando.<\/p>\n<p>Para este caso, se utiliza el elemento <code>select<\/code>, que permite crear una lista de opciones, que luego ser\u00e1n parametrizadas a trav\u00e9s de un c\u00f3digo en JavaScript. <\/p>\n<p>Es necesario indicar que existen otros caminos (l\u00edneas de c\u00f3digo) para lograr la misma soluci\u00f3n. Todo depende del estilo del programador, los recursos con los que cuenta el servidor, las caracter\u00edsticas del sitio web (<em>framework<\/em>), entre otras consideraciones.<\/p>\n<p>La siguiente soluci\u00f3n est\u00e1 orientada para creadores de contenidos que tienen conocimientos b\u00e1sicos en HTML y JS. Solo hace falta estar concentrado para lograr la configuraci\u00f3n correcta.<\/p>\n<p>Comencemos.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>Dise\u00f1o de la idea<\/h2>\n<p>Para este caso se propone crear un formulario donde el usuario puede ser enviado a cuatro sitios web diferentes. Estos cuatro sitios est\u00e1n clasificados en dos categor\u00edas, as\u00ed:<\/p>\n<p>Categor\u00eda uno: Propio.<br \/>\n  Categor\u00eda dos: Externo.<\/p>\n<p>Enlace uno, categor\u00eda uno: Blog.<br \/>\n  Enlace dos, categor\u00eda dos: Diccionario TIC.<\/p>\n<p>Enlace uno, categor\u00eda dos: YouTube.<br \/>\n  Enlace dos, categor\u00eda dos: Twitter.<\/p>\n<p>Para hacerse una mejor idea del recurso, puede <a href=\"http:\/\/e-lexia.com\/testing\/resources\/2019-formulario-redireccion\/\" target=\"_blank\" rel=\"noopener noreferrer\">ver formulario en esta p\u00e1gina<\/a>.<\/p>\n<h2>Crear el formulario HTML<\/h2>\n<p>El primer paso es insertar el formulario en la p\u00e1gina web donde interact\u00faa el usuario. El c\u00f3digo es:<\/p>\n<pre>&lt;form name=&quot;listado&quot; action=&quot;index.html&quot; method=&quot;post&quot; &gt;<br \/>\r\n  &lt;select name=&quot;nombreCategoria&quot; onchange=&quot;subCategoria();&quot; &gt;\r\n    &lt;option value=&quot;&quot;&gt;Dominio&lt;\/option&gt;\r\n  &lt;\/select&gt;<br \/>\r\n  &lt;select id=&quot;envio&quot; name=&quot;envio&quot; onchange=&quot;SelectRedirect();&quot;&gt;\r\n  &lt;option value=&quot;&quot;&gt;Web&lt;\/option&gt;\r\n  &lt;\/select&gt;<br \/>\r\n&lt;\/form&gt;<\/pre>\n<p>En este c\u00f3digo se identifica un formulario con dos elementos de selecci\u00f3n. Cada elemento de selecci\u00f3n tiene una opci\u00f3n por defecto (&quot;Dominio&quot; y &quot;Web&quot;) que no afectan los resultados de navegaci\u00f3n, son solo etiquetas que sirven para orientar al usuario.<\/p>\n<p>Hay que tener presente que cualquier cambio que se realice en este c\u00f3digo debe actualizarse en el archivo JS, que se presenta m\u00e1s adelante.<\/p>\n<h2>Cargar archivo y funci\u00f3n JS<\/h2>\n<p>En el <code>head<\/code> del documento se realiza un llamado al documento JavaScript. Para ello se inserta la l\u00ednea:<\/p>\n<pre>&lt;script language=&quot;javascript&quot; src=&quot;listadoURL.js&quot;&gt;&lt;\/script&gt;<\/pre>\n<p>Luego, en el <code>body<\/code> del documento se realiza la carga de la funci\u00f3n <code>categoria()<\/code>, que est\u00e1 expresada al inicio del archivo que acaba de llamarse.<\/p>\n<p>El <code>body<\/code> debe quedar as\u00ed:<\/p>\n<pre>&lt;body onload=&quot;categoria();&quot;&gt; <\/pre>\n<h2>C\u00f3digo JS del formulario<\/h2>\n<p>Sin duda, esta es la parte m\u00e1s extensa y de mayor cuidado en el trabajo.<\/p>\n<pre>\/\/ JavaScript Document<br \/>\r\n  function categoria(){<br \/>    addOption(document.listado.nombreCategoria, &quot;categoriaUno&quot;, &quot;Propio&quot;, &quot;&quot;);<br \/>    addOption(document.listado.nombreCategoria, &quot;categoriaDos&quot;, &quot;Externo&quot;, &quot;&quot;);<br \/>  }<br \/><br \/>  function subCategoria() {<br \/>    removeAllOptions(document.listado.envio);<br \/>    addOption(document.listado.envio, &quot;&quot;, &quot;Web&quot;, &quot;&quot;);<br \/>\r\n  if(document.listado.nombreCategoria.value == 'categoriaUno'){<br \/>    addOption(document.listado.envio,&quot;propioBlog&quot;, &quot;Blog&quot;);<br \/>    addOption(document.listado.envio,&quot;propioDiccionarioTIC&quot;, &quot;Diccionario TIC&quot;);<br \/>  }<br \/>\r\n  if(document.listado.nombreCategoria.value == 'categoriaDos'){<br \/>    addOption(document.listado.envio,&quot;externoYouTube&quot;, &quot;YouTube&quot;);<br \/>    addOption(document.listado.envio,&quot;externoTwitter&quot;, &quot;Twitter&quot;);<br \/>  }<br \/>\r\n  }<br \/><br \/>  function removeAllOptions(selectbox) {<br \/>    var i;<br \/>    for(i=selectbox.options.length-1;i&gt;=0;i--) {<br \/>      \/\/selectbox.options.remove(i);<br \/>      selectbox.remove(i);<br \/>    }<br \/>  }<br \/><br \/>  function addOption(selectbox, value, text ) {<br \/>    var optn = document.createElement(&quot;OPTION&quot;);<br \/>    optn.text = text;<br \/>    optn.value = value;\r\n    selectbox.options.add(optn);<br \/>  }<br \/>\r\n  function redireccion() {<br \/>    switch(document.listado.envio.value) {\r\n\r\n      case &quot;propioBlog&quot;:<br \/>      window.location=&quot;http:\/\/e-lexia.com&quot;;<br \/>      break;\r\n\r\n      case &quot;propioDiccionarioTIC&quot;:<br \/>      window.location=&quot;http:\/\/e-lexia.com\/diccionario-tic&quot;;<br \/>      break;<br \/>\r\n      case &quot;externoYouTube&quot;:<br \/>      window.location=&quot;https:\/\/youtube.com\/user\/juanca826&quot;;<br \/>      break;<br \/>\r\n      case &quot;externoTwitter&quot;:<br \/>      window.location=&quot;https:\/\/twitter.com\/juancadotcom&quot;;<br \/>      break;<br \/>\r\n      default:<br \/>      window.location=&quot;..\/&quot;; <br \/>      break;<br \/>\r\n    }\r\n  }\r\n<\/pre>\n<p>Siguiendo las instrucciones del <code>head<\/code>, el c\u00f3digo anterior se guarda en el archivo listadoURL.js.<\/p>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<h2>Explicaci\u00f3n del c\u00f3digo<\/h2>\n<p>En palabras sencillas, el c\u00f3digo JavaScript funciona as\u00ed:<\/p>\n<p>La funci\u00f3n <code>categoria()<\/code> define el primer grupo. Para este ejemplo, &quot;Propio&quot; y &quot;Externo&quot; son las opciones.<\/p>\n<pre>function categoria(){<br \/>  addOption(document.listado.nombreCategoria, &quot;categoriaUno&quot;, &quot;Propio&quot;, &quot;&quot;);<br \/>  addOption(document.listado.nombreCategoria, &quot;categoriaDos&quot;, &quot;Externo&quot;, &quot;&quot;);<br \/>}\r\n<\/pre>\n<p>Luego, la funci\u00f3n <code>subCategoria()<\/code> define las posibles opciones para cada una de las categor\u00edas. Cada subcategor\u00eda es expresada de manera independiente y sus opciones se definen despu\u00e9s de un condicional.<\/p>\n<pre>function subCategoria() {<br \/>  removeAllOptions(document.listado.envio);<br \/>  addOption(document.listado.envio, &quot;&quot;, &quot;Web&quot;, &quot;&quot;);<br \/>\r\n  if(document.listado.nombreCategoria.value == 'categoriaUno'){<br \/>    addOption(document.listado.envio,&quot;propioBlog&quot;, &quot;Blog&quot;);<br \/>    addOption(document.listado.envio,&quot;propioDiccionarioTIC&quot;, &quot;Diccionario TIC&quot;);<br \/>  }<br \/>\r\n  if(document.listado.nombreCategoria.value == 'categoriaDos'){<br \/>    addOption(document.listado.envio,&quot;externoYouTube&quot;, &quot;YouTube&quot;);<br \/>    addOption(document.listado.envio,&quot;externoTwitter&quot;, &quot;Twitter&quot;);<br \/>  }<br \/>\r\n}\r\n<\/pre>\n<p>Para el caso de este art\u00edculo, las opciones de la categor\u00eda &quot;Propio&quot; son: &quot;Blog&quot; y &quot;Diccionario TIC&quot;, y para la categor\u00eda &quot;Externo&quot;, &quot;YouTube&quot; y &quot;Twitter&quot;.<\/p>\n<p>Sobre el final del documento, la funci\u00f3n <code>redireccion()<\/code> se encarga de identificar las cuatro posibles combinaciones y asignar un <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/enlace-web\/\" rel=\"noopener\" target=\"_blank\">enlace<\/a> de destino a cada una de ellas.<\/p>\n<pre>function redireccion() {<br \/>  switch(document.listado.envio.value) {<br \/>\r\n    case &quot;propioBlog&quot;:<br \/>    window.location=&quot;http:\/\/e-lexia.com&quot;;<br \/>    break;<br \/>\r\n    case &quot;propioDiccionarioTIC&quot;:<br \/>    window.location=&quot;http:\/\/e-lexia.com\/diccionario-tic&quot;;<br \/>    break;<br \/>\r\n    case &quot;externoYouTube&quot;:<br \/>    window.location=&quot;https:\/\/youtube.com\/user\/juanca826&quot;;<br \/>    break;<br \/>\r\n    case &quot;externoTwitter&quot;:<br \/>    window.location=&quot;https:\/\/twitter.com\/juancadotcom&quot;;<br \/>    break;<br \/>\r\n    default:<br \/>    window.location=&quot;..\/&quot;<br \/>    break;<br \/>  }<br \/>\r\n}\r\n<\/pre>\n<p>En caso de querer ampliar los casos, se pueden insertar nuevas l\u00edneas antes del c\u00f3digo:<\/p>\n<pre>default:<br \/>window.location=&quot;..\/&quot;<br \/>break;\r\n<\/pre>\n<p>Por cierto, esta l\u00ednea sirve para indicar una URL de destino en caso que no ocurre ninguna de las combinaciones anteriores.<\/p>\n<h2>Agregar m\u00e1s datos al formulario<\/h2>\n<p>El c\u00f3digo puede personalizarse a la medida: se pueden agregar nuevas categor\u00edas y subcategor\u00edas, y ajustar los casos y URL, procurando siempre conservar la integridad -especialmente- del archivo JavaScript.<\/p>\n<p>Por \u00faltimo, indico que este c\u00f3digo es una adaptaci\u00f3n del recurso disponible en <a href=\"https:\/\/www.plus2net.com\/javascript_tutorial\/dropdown-redirect.php\" target=\"_blank\" rel=\"noopener noreferrer\">Redirecting page to different location after selection of dropdown listbox in JS<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si necesita crear un formulario HTML que -de acuerdo con la selecci\u00f3n- env\u00ede a sus usuarios a una u otra p\u00e1gina web, este art\u00edculo es el que est\u00e1 buscando. Para este caso, se utiliza el elemento select, que permite crear una lista de opciones, que luego ser\u00e1n parametrizadas a trav\u00e9s&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1645,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[65,26],"class_list":["post-1644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-codigo","tag-wordpress","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=1644"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1644\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1645"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}