List of products which filters away items based on form radio button selection
Here goes ..... very simply I need:
1. The user lands on a web page with a list of products which will have tags associated with each - lets say for the sake of this test that they are food and have these tags:
- Apples [Sweet, Fruit, Healthy]
- Potatoes [Bland, Vegetable, Healthy] [
- Fizzy Sweets [Sweet, Confectionary, Not Healthy]
- Chips [Tasty, Vegetable, Not Healthy]
- Grapes [Sweet, Fruit, Healthy]
- Lemons [Sour, Fruit, Healthy]
2. At the top of this list I would like to create a filter list widget with radio buttons. This widget will eliminate options from the list until it leaves only the foods with the relevant tags displaying.
In this case the widget would diplay: (and the highlighted answers)
- Do you fancy sweet food? [U]YES[/U] / NO
- Do you want healthy food? YES / NO
- Do you fancy fruit? YES / NO
These options would eliminate all healthy foods and fruits from the list.
The user would then only have to look through the options relevant to them.
I have been offered a solution where the page starts blank and then as the options are selected (and then a 'submit' button is pressed) The relevant list items appear. My list MUST start populated with items and then reduce as the options are selcted.
Does anyone know where I can find a similar solution I can tailor to fit my needs?
Any help would be truly appreciated!
You can remove options from a select list by setting the desired option to null. Doing so removes the option from the list, with the options below it moving up to occupy the void.
But what if the user changes his mind and decides that he does want healthy food or whatever after all?
He is the second highest run-scorer of all time and his record speaks for itself - he is second to none. - Commentator Radio 4
Thanks for your reply Philip!
I guess in that circumstance we we need the list to repopulate with the items they want back?
The things I know at the moment is that:
2: The list options would have to have tags associated to the radio buttons
I had a project like this a year ago which I hoped would leave me with enough code to re-edit and make applicable to what i need now. But alas ... not really!
That system worked with a list of product options and, as each option was selected, that selection was presented in a form at the bottom which could then be sent to the admin team. It also totled the price of their selections in a floating box and in the form. I have offered my client this solution and they are adament they would like it the way I have previously described!
You should advise your client that this makes no sense for the reason I have mentioned.
IMO you are going about this the wrong way. Have a look at
and see if that helps you.
It does help a bit mate - cheers! I have actually thought of making the system a bit different - could you advise on whether this will solve any potential problems and - if you have time - steer me in the right direction?
1. The user lands on the list of products page
2. Form at the top asking questions which have drop down options for the answers
3. USER PRESSES SUBMIT
4. A pop up appears offering the user their top choice foods
This way the product list never has to reduce or grow. Surely this would be easier to achieve whilst offering the same function?
In reality - the food options would have a fair few tags associated with them and the code would have eliminate the foods based on their unsuitability.
For this example the product list would be: [with hidden tags]
APPLES [sweet, healthy, fruit, green, chewy, hard, grown on trees]
GRAPES [sour, healthy, fruit, green, soft, squidgy, grown on vines]
CHIPS [savoury, bad for you, brown, soft, made from potatoes]
CARROTS [savoury, healthy, orange, tough, grown in ground]
and on - there would probably be about 20 + products with 15 tags associated to each.
So in this case - the questions would say something like:
PLEASE SELECT SWEETNESS: [dropdown: Very Sweet, Sweet, Savoury, Sour]
PLEASE SELECT HEALTHINESS: [dropdown: Very Healthy, Healthy, OK, Bad]
PLEASE SELECT COLOUR: [dropdown: Orange, Brown, Green, Yellow, White]
If the user selects [Savoury] it eliminates Apples & Grapes. If they then select [Healthy] the only thing left would be CARROTS.
I want this answer to be delivered in a pop up box.
What do you think?
Cheers in advance for your help!
You haven't mentioned CSS, which I think would be much easier to implement.
Rather than trying to use JS to remove elements from the page, give various options and selects different class-names, then use JS to switch these class names with ones that have display:none or visibility: hidden. For example, an option with display:none will be removed from the display but the select will still function properly.
If you remove an element from the DOM it is trickier to re-introduce it; using CSS we can easily get it back by changing back to a class with visibility:visible or display:block (etc.).
Added: Another possibility is to have, for example, different SELECTs occupying the same space and use their CSS z-index (or class-names that include this property) (and/or visibility) to bring one to the front.
Added: visibility:hidden will leave a gap.. ugh! I suppose we could move it to the end, but IE is making something simple more complicated.
I literally do not have a clue where to start short of knowing I need:
A form for my dropdown boxes
A product list with tags
Deliver answers in a pop up box
Thanks again guys - this forum is great!
I do not wish to seem unkind, but this forum is not a free coding service. You are asking a great deal. As a general rule, the people helping out in this forum don't write code for others (especially code that appears to be for commercial use), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.
To offer you a suggestion, here is a script to move selected options from one select list to another. The first list could be hidden and the move triggered by the selection of radio buttons. But any change in the radio buttons would need to repopulate the second select list.
I generally agree with Philip (especially in terms of if you're getting paid to do it and you can't, pay someone else to do it) but I was bored, so here is my version of your first idea:
and the second one (although I hope this isn't what you mean by "pop up box")...
... but a mixture of the two seems better to me...
I'll have a look over your suggestions - cheers guys :)
Out of interest and so I know for the future ...... you wrote in a previous post "Although I hope this is not what you mean by "pop up box" ......" I obviously know pop up boxes affect the blockers etcbut have used these in the past to get certain jobs on a site done .... I take it I should not be?
The more I look at the 3 options presented - the pop up box option is actually the one that provides the functionality I need ........
|All times are GMT +1. The time now is 06:06 AM.|
Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.