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.
2
Answers
About your comment on
getElementById
:I’m assuming you have this problem because all your dropdowns have the same id. Try giving them each a unique id:
Now if we run the following code upon submit:
dropdown1.value
anddropdown2.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.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.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:The subsequent if statements reflect my understanding of your problem statement. If it’s not accurate, they should be easy to tweak.