Nuevo en JavaScript buscando ayuda. (Intentando configurar un formulario para que los estudiantes de mi clase lo llenen)
Estoy trabajando en el formulario de contacto 7 para WordPress. El formulario tiene varios menús desplegables. Quiero redirigir a los estudiantes a una URL específica si el estudiante selecciona una de las opciones desplegables cuando envía. Es un poco complicado que eso según mi ejemplo a continuación.
Déjame desglosarlo un poco
Entonces, por ejemplo, digamos que tengo tres menús desplegables y en uno de los tres menús desplegables las opciones son "Ratón", "Teclado" y "Laptop", el otro es "Ratón inalámbrico", "Teclado inalámbrico" y "ChromeBook" y el último siendo "Bluetooth Mouse", "Bluetooth Keyboard" y "Macbook".
Entonces, si el primer menú desplegable el estudiante selecciona "Laptop" y en los segundos menús desplegables selecciona "Ratón inalámbrico" y en el otro selecciona "Teclado Bluetooth", quiero redirigir a los estudiantes a una URL de "Laptop" ya que "Laptop" es el más caro. /highest y anula los otros dos.
Si los estudiantes no han seleccionado "computadora portátil" (o cualquiera de las computadoras portátiles de ninguno de los tres menús desplegables) y han seleccionado "Teclado" (o cualquiera de los teclados) en al menos uno de los menús desplegables (que es el siguiente artículo costoso) i quiere redirigir a una URL diferente
A continuación se muestra un ejemplo de lo que terminé, pero noté que document.getElementById() solo admite un nombre a la vez y solo devuelve un solo nodo y no funcionará para identificar las selecciones desplegables de los otros dos menús desplegables.
JAVASCRIPT
document.addEventListener( 'wpcf7mailsent', function( event ) { var lpLocation = document.getElementById("basicitems").value; if (lpLocation == "Mouse") { location = 'https://google.com'; } else if (lpLocation == "Keyboard") { location = 'https://facebook.com'; } }, false );HTML
<label> <h1>Items you need</h1> [select* Items id:basicitems "Mouse" "Keyboard" "Laptop"] </label> <label> <h1> Wireless Items you need</h1> [select* WirelessItems id:wirelessitems "Wireless Mouse" "Wireless Keyboard" "Chromebook"] </label> <label> <h1> Bluetooth Items you need</h1> [select* BluetoothItems id:bluetoothitems "Bluetooth Mouse" "Bluetooth Keyboard" "Macbook"] </label> [submit "Submit"]No puedo entender cómo proceder. Espero no estar volviendo loco. Cualquier ayuda de los expertos será muy apreciada.
Acerca de su comentario en getElementById :
document.getElementById() solo admite un nombre a la vez y solo devuelve un solo nodo y no funcionará para identificar las selecciones desplegables de los otros dos menús desplegables
Supongo que tiene este problema porque todos sus menús desplegables tienen la misma identificación. Intente darles a cada uno una identificación única:
<select id="dropdown1">...</select> <select id="dropdown2">...</select>Ahora, si ejecutamos el siguiente código al enviar:
let dropdown1 = document.getElementById('dropdown1'); let dropdown2 = document.getElementById('dropdown2'); dropdown1.value y dropdown2.value contienen los valores de sus respectivos menús desplegables. En cuanto a la lógica condicional, creo que puedes lograr lo que quieras con un solo árbol if/else.
if(dropdown1.value === 'laptop') { // First in if/else tree because most expensive window.location.href = 'http://google.com'; } else if(dropdown2.value === 'keyboard') { // Second in if/else tree because second most expensive // chromebook redirect here } // Conditional logic continues... Una demostración está disponible aquí: https://jsfiddle.net/85wkscn4/11/ . La redirección no funciona en JS Fiddle, pero en una configuración de archivo HTML independiente window.location.href funcionará bien.
Es cierto que document.getElementById() devuelve solo un nodo y hay una razón para eso: en html adecuado, las identificaciones son únicas y cada identificación solo debe existir en un elemento. En su caso, debe realizar 3 consultas diferentes por id:
document.addEventListener('wpcf7mailsent', function (event) { const basicItemsSelection = document.getElementById("basicitems").value; const wirelessItemsSelection = document.getElementById("wirelessitems").value; const bluetoothItemsSelection = document.getElementById("bluetoothitems").value; if (basicItemsSelection === 'Laptop' || wirelessItemsSelection === 'Chromebook' || bluetoothItemsSelection === 'Macbook') { window.location = 'some_laptop_url'; } else if (basicItemsSelection === 'Keyboard' || wirelessItemsSelection === 'Wireless Keyboard' || bluetoothItemsSelection === 'Bluetooth Keyboard') { window.location = 'some_keyboard_url'; } else { window.location = 'some_other_url'; } }, false);Las siguientes declaraciones if reflejan mi comprensión de la declaración de su problema. Si no es preciso, deberían ser fáciles de modificar.