HTML Multiple dropdown menu to select appropriate link |
HTML Multiple dropdown menu to select appropriate link |
Qqqeeerrr |
May 24 2018, 09:25 AM
Post
#1
|
Group: Members Posts: 9 Joined: 24-May 18 Member No.: 26,649 |
Hi guys, Im new to htmlhelp.com and so far love what i see.
HTML & CSS coding is definitely not one of my strengths, so please excuse the poor language. I have a product on my website that has 48 different possible variations, and due to the limitations of shopify i am required to figure this out on my own. I imagine the easiest way to display this to a user is to have dropdown menus that then lead to an appropriate product link that can be set. The options should look like (Dropdown menu 1 -( size of object)) Option a B C (Dropdown menu 2 (side object)) A B C D (Dropdown menu 3 (back object)) A > link to product B > link to product C > link to product D > link to product So the first two dropdown menus should affect the result of the link depending on the option. Is this possible at all? Thanks in advance! |
Christian J |
May 24 2018, 04:17 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
That can't be done with HTML alone, but you might use javascript (or a server-side script like PHP) to generate the third dropdown menu.
Here's an old example, though the last level doesn't take you anywhere: http://www.javascriptkit.com/script/script...iplecombo.shtml |
Qqqeeerrr |
May 24 2018, 05:30 PM
Post
#3
|
Group: Members Posts: 9 Joined: 24-May 18 Member No.: 26,649 |
Thank you! Thats exactly what i am after, except ofcourse the last combo will take direct you to a link on user click. Ive never actually edited PHP do you know if thats possible with shopify? Normaly i can click on certain sections and edit the CSS for it and html in some cases
|
Qqqeeerrr |
May 24 2018, 05:42 PM
Post
#4
|
Group: Members Posts: 9 Joined: 24-May 18 Member No.: 26,649 |
Also just found this. Would this be easier to work with?
Html & java script: http://jsfiddle.net/v917ycp6/595/ |
Qqqeeerrr |
May 24 2018, 10:16 PM
Post
#5
|
Group: Members Posts: 9 Joined: 24-May 18 Member No.: 26,649 |
Ok, Christian i released your code was better and has the functions that i need.
Although i couldnt get it running correctly and when i uploaded the code and saved it on JSFiddle it doesnt work their either: https://jsfiddle.net/dge0a0js/ Any ideas. PS. i managed to get the whole thing running with errors by pasting the entire code in the body and it seems like theres a dialogue that pops up as a result of all the selections. anyway we can change this to a link redirection instead? Thanks. |
Christian J |
May 25 2018, 06:34 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
it seems like theres a dialogue that pops up as a result of all the selections. anyway we can change this to a link redirection instead? A quick fix might be to change this part: CODE function getValue(L3, L2, L1) { alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3); } to this: CODE function getValue(L3, L2, L1) { location.href=L1 + L2 + L3 + '.html'; } Unfortunately the URL then becomes exactly the same as the combined OPTION texts, say "BooksBiographyContemporay.html". This is because the script uses the same values both for the OPTION texts and VALUE attributes. Also it's not user-friendly to load a different URL when a SELECT menu is changed, since users often do it by mistake. And of course you need to create 48 separate pages... |
Christian J |
May 25 2018, 06:46 AM
Post
#7
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Here's another idea. Add a submit button to the form, and make the form's ACTION attribute point to the URL of say a checkout page (I don't know how shopify works):
CODE <form name="tripleplay" action="checkout.php"> ... <input type="submit" value="Send"> </form> Then change this part: CODE <select name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)"> to this: CODE <select name='List3'> That way pressing the Submit button loads a single URL (in this case "checkout.php") with a querystring attached, like: "checkout.php?List1=Books&List2=Biography&List3=Contemporay" (the querystring can then be used by a server-side script to generate the page). Also the submit button prevents the user from making selection mistakes. |
Qqqeeerrr |
May 25 2018, 07:02 PM
Post
#8
|
Group: Members Posts: 9 Joined: 24-May 18 Member No.: 26,649 |
Thanks Christian!
I'm getting a error come up on each box, Ive tried both the original code and the update you showed. I took some screenshots and attached. Any ideas why that's coming up? https://ibb.co/jV1J88 https://ibb.co/jNYjFo Do you think this piece of code would ever be able to have an individual link for each result. As in - IF selection 1 = ?, selection 2 = ?, selection 3=? go to www.google.com.au? Each variation would require a different link - but you mentioned each URL becomes the same? |
Christian J |
May 25 2018, 07:17 PM
Post
#9
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
I took some screenshots and attached. Any ideas why that's coming up? https://ibb.co/jV1J88 https://ibb.co/jNYjFo No idea without seeing the complete page. Doesn't it work on a simple sample page (without anything else on it)? Can't say why the jsfiddle page doesn't work either, sorry. QUOTE Do you think this piece of code would ever be able to have an individual link for each result. As in - IF selection 1 = ?, selection 2 = ?, selection 3=? go to www.google.com.au? Not sure what you meant there, do you mean a URL that's different from the OPTION text? QUOTE you mentioned each URL becomes the same? Only in my second example. I didn't explain it correctly, the URLs are technically different but only a single file (say "checkout.php") would be needed, and a server-side script would take care of the rest. That's how our forum works --all forum posts etc are from index.php, it's just the querystring (the part after the "?" in the URL) that differs. |
Qqqeeerrr |
May 25 2018, 07:58 PM
Post
#10
|
Group: Members Posts: 9 Joined: 24-May 18 Member No.: 26,649 |
PM'd you the details for access. For some reason it does work on JSfiddle but - all the code must be on the HTML part i realised. I did the same thing on the website, although getting those items come up aswell.
The sites hosted with shopify but you can add HTML code like any other side but in sections. and QUOTE Do you think this piece of code would ever be able to have an individual link for each result. As in - IF selection 1 = ?, selection 2 = ?, selection 3=? go to www.google.com.au? Not sure what you meant there, do you mean a URL that's different from the OPTION text? Well I mean that as a condition in html code, the URL can be anything |
Qqqeeerrr |
May 25 2018, 08:43 PM
Post
#11
|
Group: Members Posts: 9 Joined: 24-May 18 Member No.: 26,649 |
Update -
Good news: Got this one working correctly - http://jsfiddle.net/mfuusp9p/551/ Now its just a matter of linking them to a URL on final selection. I'll keep you posted. This post has been edited by Qqqeeerrr: May 25 2018, 09:13 PM |
Qqqeeerrr |
May 25 2018, 10:59 PM
Post
#12
|
Group: Members Posts: 9 Joined: 24-May 18 Member No.: 26,649 |
so i came up with this but it doesnt like it.. but i think if i could get that to work, then i can duplicate it for all the other variations and get individual links to work - right??
CODE window.onload = function(){ if (citySel.value = '3000mm x 3000mm') { if (stateSel.value = 'no back') { if (countySel.value = 'no side') { window.location.href = "http://www.google.com"; } else { window.location.href = "http://www.bing.com"; } }; |
Qqqeeerrr |
May 26 2018, 02:01 AM
Post
#13
|
Group: Members Posts: 9 Joined: 24-May 18 Member No.: 26,649 |
GOT IT!!
https://codepen.io/anon/pen/zjgqPr Check out the code here. I only have the California > Monterery > Gonzalas & Salina working. But I'm good from here. Thanks again for the help christian!! This post has been edited by Qqqeeerrr: May 26 2018, 02:18 AM |
Christian J |
May 26 2018, 06:38 AM
Post
#14
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
There are no locations added in the codepen sample, so it didn't work for me, but you're welcome.
BTW, be careful with window.onload since it may conflict with window.onload events in other scripts. If you instead use window.addEventListener together (with load or better DOMContentLoaded) you shouldn't get any such conflicts. |
Lo-Fi Version | Time is now: 27th April 2024 - 09:57 PM |