Redirect User to specific URL depending of selected dropdown during submit-CodePudding

New to JavaScript seeking some help. (Trying to setup a form for my class students to fill)

I am working on Contact form 7 for WordPress. The form has several dropdowns. I want to redirect the students to a specific URL if the student select one of the dropdown options when submit. It is a bit complicated than that as per my example below.

Let me break it down a bit

So for example lets say i have three dropdown and on one of the three dropdown the options are "Mouse", "Keyboard" and "Laptop" the other being "Wireless mouse", "Wireless Keyboard" and "ChromeBook" and the last one being "Bluetooth Mouse, "Bluetooth Keyboard" and "Macbook".

So if the first dropdown the student selects "Laptop" and on the second dropdowns they select "Wireless Mouse" and on the other they select "Bluetooth Keyboard" i want to redirect students to a "Laptop" URL as "Laptop" is the expensive/highest and overrides the other two.

If students have not selected "laptop" (or any of the laptops from any of the three dropdowns) and has selected "Keyoard" (or any of the keyboards) in at least one of the dropdowns (which is the next expensive item) i want to redirect to different URL

Below is an example of what i ended up with but noticed that document.getElementById() only supports one name at a time and only returns a single node and it wont work to identify the dropdown selects from the other two dropdowns

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"]

I cannot wrap my head around how to proceed. I hope i am not going crazy. Any help from the experts will be much appreciated.

CodePudding user response：

It is true that document.getElementById() returns only one node and there is a reason for that: in proper html, id's are unique and each id should only exist on one element. In your case, you need to perform 3 different queries by 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);

The subsequent if statements reflect my understanding of your problem statement. If it's not accurate, they should be easy to tweak.

CodePudding user response：

About your comment on getElementById:

document.getElementById() only supports one name at a time and only returns a single node and it wont work to identify the dropdown selects from the other two dropdowns

I'm assuming you have this problem because all your dropdowns have the same id. Try giving them each a unique id:

<select id="dropdown1">...</select>
<select id="dropdown2">...</select>

Now if we run the following code upon submit:

let dropdown1 = document.getElementById('dropdown1');
let dropdown2 = document.getElementById('dropdown2');

dropdown1.value and dropdown2.value contain the values of their respective dropdowns. As for the conditional logic, I believe you can accomplish what you want with a single if/else tree.

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

A demo is available here: https://jsfiddle.net/85wkscn4/11/. The redirect doesn't work in JS Fiddle, but in a standalone HTML file setting window.location.href will work fine.