The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML Multiple dropdown menu to select appropriate link
Qqqeeerrr
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 24 2018, 04:17 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,916
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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Qqqeeerrr
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Qqqeeerrr
post 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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Qqqeeerrr
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 25 2018, 06:34 AM
Post #6


.
********

Group: WDG Moderators
Posts: 7,916
Joined: 10-August 06
Member No.: 7



QUOTE(Qqqeeerrr @ May 25 2018, 05:16 AM) *

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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 25 2018, 06:46 AM
Post #7


.
********

Group: WDG Moderators
Posts: 7,916
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Qqqeeerrr
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 25 2018, 07:17 PM
Post #9


.
********

Group: WDG Moderators
Posts: 7,916
Joined: 10-August 06
Member No.: 7



QUOTE(Qqqeeerrr @ May 26 2018, 02:02 AM) *

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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Qqqeeerrr
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Qqqeeerrr
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Qqqeeerrr
post 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";
    }
};
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Qqqeeerrr
post 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!! smile.gif

This post has been edited by Qqqeeerrr: May 26 2018, 02:18 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 26 2018, 06:38 AM
Post #14


.
********

Group: WDG Moderators
Posts: 7,916
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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th October 2018 - 09:05 PM