Añadir múltiples opciones de selección a un parámetro de URL con JavaScript | eliminar indefinidos

¿Cómo agregar múltiples opciones de selección a una URL usando JavaScript y evitar el problema de «undefined»? Este artículo te guiará a través del proceso para configurar correctamente tu formulario y modificar la URL según las selecciones del usuario, asegurando que no se incluyan valores indefinidos en la cadena de consulta.

Es común querer enviar valores seleccionados de un menú desplegable a una URL. A continuación, exploraremos cómo hacerlo utilizando JavaScript, y abordaremos un inconveniente que muchos enfrentan: la inclusión de «name=undefined» en la URL cuando la primera opción de selección está vacía. Analizaremos cómo evitar que esto suceda y cómo manejar selecciones predefinidas correctamente.

Ejemplo de Código HTML y JavaScript

<form action="" method="GET" id="myForm">
    <select name="channel" id="0" onChange="changeURL(0)">
            <option value="" selected disabled>Elige Canal</option>
            <option value="facebook-ads">Facebook Anuncios</option>
            <option value="instagram-ads">Instagram Anuncios</option>
    </select>
    <select name="brand" id="1" onChange="changeURL(1)">
            <option value="" selected disabled>Elige Marca</option>
            <option value="brand-1">Marca 1</option>
            <option value="brand-2">Marca 2</option>
            <option value="brand-3">Marca 3</option>
    </select>
</form>
<p id="output"></p>
<script>

var filters = [,]; // Creación de un array para almacenar los valores seleccionados

function changeURL(index) {
    var baseUrl = "https://tudominio.com"; // Cambia esta URL por la tuya
    filters[index] = document.getElementById(index).value; // Establecer el valor del filtro seleccionado

    var queryString = "?"; // Inicio de la cadena de consulta
    var paramAdded = false; // Controlar si algún parámetro ha sido añadido

    for (var i = 0; i < filters.length; i++) {
        if (filters[i]) { // Verificar si el valor no está vacío
            if (paramAdded) {
                queryString += "&"; // Añadir el símbolo & para múltiples parámetros
            }
            var filterName = document.getElementById(i).name; // Obtener el nombre del filtro
            queryString += filterName + "=" + filters[i];
            paramAdded = true; // Indicar que se ha añadido un parámetro
        }
    }

    var finalUrl = baseUrl + queryString; // Construcción de la URL final
    document.getElementById("output").innerHTML = finalUrl; // Mostrar la nueva URL
}
</script>

Explicación del Código

En este código, tenemos un formulario con dos menús desplegables que permiten a los usuarios seleccionar un canal y una marca. La función changeURL se activa cada vez que el usuario hace un cambio en alguna de las selecciones.

El array filters almacena los valores seleccionados y verificamos si cada filtro tiene un valor antes de agregarlo a la URL. Este enfoque previene que se añada «undefined» a la cadena de consulta si alguna opción no está seleccionada.

Conclusión

Implementando este enfoque, podrás gestionar múltiples selecciones en tus formularios y construir URLs limpias y efectivas en tu sitio web. Además, asegúrate de revisar las selecciones predeterminadas en HTML para evitar que aparezcan como «undefined». Al final, lograrás una experiencia de usuario más fluida y sin errores en la generación de URLs.