CodingForums.com - List of products which filters away items based on form radio button selection

Page 1 of 2

Show 40 post(s) from this thread on one page

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - List of products which filters away items based on form radio button selection (http://www.codingforums.com/showthread.php?t=284131)

yiaggi

12-14-2012 12:06 PM

List of products which filters away items based on form radio button selection

Hi guys,

As a web designer and developer, I am usually pretty good at finding this stuff out for myself - with Google, perseverence and my limited knowledge of Javascript but for some reason my Google searches are coming up blank or not right .... could anyone point me in the right direction?

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.

For instance:

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!

:)

Philip M

12-14-2012 12:35 PM

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.

document.myform.Apples.options[2]=null;

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

yiaggi

12-14-2012 02:16 PM

Thanks for your reply Philip!

I guess in that circumstance we we need the list to repopulate with the items they want back?

Whilst it is great you replied and I really appreciate it - I think I would need to go back a bit further in my solution ...... I have found a solution to something similar to this before but I had to start with some similar Javascript and work in what I needed.

The things I know at the moment is that:

1: The radio buttons would have to be a form mixed with Javascript
2: The list options would have to have tags associated to the radio buttons
3. There must be some Javascript code to handle the system.

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!

So .... in short .... thanks for your suggestion - i'm sure it will become relevant when I get more into the project but, for now, I really need to know the basics of how I would set up and the javascript code associated.

:)

Philip M

12-14-2012 04:02 PM

Quote:

Originally Posted by yiaggi (Post 1299842)

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

http://www.codingforums.com/showthread.php?t=282936

and see if that helps you.

yiaggi

12-15-2012 04:16 PM

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?

How about:

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?

The ideal - and I guess the hard part for me is the javascript code which selects the ideal foods based on the options selected selected.

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!

AndrewGSW

12-15-2012 04:55 PM

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.

Philip M

12-15-2012 05:07 PM

Quote:

Originally Posted by AndrewGSW (Post 1300126)

Snag - IE will not allow you to set the display to none on option elements.

AndrewGSW

12-15-2012 05:36 PM

Quote:

Snag - IE will not allow you to set the display to none on option elements.

Don't we just LOVE IE!! So either visibility:hidden or the horrible height:0 :eek:

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.

yiaggi

12-16-2012 10:22 AM

Thanks for your input guys! I have to sy that you have lost me a bit now! :) I'm a web designer and use CSS frequently but have not had the time to really sit down and work out the full power of it! I am great with it when it comes to styling pages etc - just not the side you are discussing! similarly with JavaScript - once I have a solution that works I am great at editing it to get what I want - I am just a beginner when it comes to original code!

I'm happy to leave the list adding and subtracting idea and go with what I described in my last post - any ideas in where I could find tutorials for that?? I need to start at the beginning with this one. I have a good bank of JavaScript widgets from other websites I have designed but none I can edit for this use.

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
JavaScript to recognise which tags are applicable
Deliver answers in a pop up box

Thanks again guys - this forum is great!

Philip M

12-16-2012 10:32 AM

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.

Code:

<form name='myform'>

<select name = 'list1' id = 'list1' onchange = "removeOptions(this)">

<option selected value=""> Choose One Or More Fruits</option>

<option value='Mango'> Mango </option>

<option value='Apple'> Apple </option>

<option value='Sunkist'> Sunkist </option>

<option value='Watermelon'> Watermelon </option>

<option value='Papaya'> Papaya </option>

<option value='Strawberry'> Strawberry </option>

<option value='Banana'> Banana </option>

<option value='Peach'> Peach </option>

</select>



<select name = 'list2' id = 'list2'>

<option value = ""> You have selected:- </option>

</select>



</form>



<script type = "text/javascript">

var val = "";

function removeOptions(selectbox) {

val = selectbox.value;

for (var i = selectbox.options.length-1; i>=1; i--) {

if (selectbox.options[i].selected) {

selectbox.remove(i);

addOption(document.myform.list2,val,val);

document.myform.list1.focus();

}

}

}



function addOption(selectbox,optiontext,optionvalue )

{

var optn = document.createElement("OPTION");

optn.text = optiontext;

optn.value = optionvalue;

selectbox.options.add(optn);

}



</script>

xelawho

12-16-2012 02:34 PM

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:

Code:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<form id="theform">

Do you fancy sweet food? <input type="radio" name="sweet" value="yes"/>YES <input type="radio" name="sweet" value="no"/>NO<br>

Do you want healthy food? <input type="radio" name="health" value="yes"/>YES <input type="radio" name="health" value="no"/>NO<br>

Do you fancy fruit? <input type="radio" name="fruit" value="yes"/>YES <input type="radio" name="fruit" value="no"/>NO

</form>

<div id="res">

Your food options are:<br>

Apples<br>

Potatoes<br>

Fizzy Sweets<br>

Chips<br>

Grapes<br>

Lemons

</div>



<script type="text/javascript">

var rads=document.getElementById("theform").getElementsByTagName("input");

  for (var i = 0; i < rads.length; i++) {

  rads[i].onclick=thefunc;

}



function thefunc(){

var foods={

Apples:{tasty:"no", sweet:"yes", sour:"no", bland:"no", fruit:"yes", vegetable:"no", confectionary:"no", health:"yes"},

Potatoes:{tasty:"no", sweet:"no", sour:"no", bland:"yes", fruit:"no", vegetable:"yes", confectionary:"no", health:"yes"},

"Fizzy Sweets":{tasty:"no", sweet:"yes", sour:"no", bland:"no", fruit:"no", vegetable:"no", confectionary:"yes", health:"no"},

Chips:{tasty:"yes", sweet:"no", sour:"no", bland:"no", fruit:"no", vegetable:"yes", confectionary:"no", health:"yes"},

Grapes:{tasty:"no", sweet:"yes", sour:"no", bland:"no", fruit:"yes", vegetable:"no", confectionary:"no", health:"yes"},

Lemons:{tasty:"no", sweet:"no", sour:"yes", bland:"no", fruit:"yes", vegetable:"no", confectionary:"no", health:"yes"}

}



 var picks="Your preferred food(s) are:<br>"; 

 document.getElementById("res").innerHTML="";

for (var j = 0; j < rads.length; j++) {

var r=rads[j];

if (r.name=="sweet"&&r.checked){var swt=r.value}

if (r.name=="health"&&r.checked){var hlt=r.value}

if (r.name=="fruit"&&r.checked){var frt=r.value}

                                        }

for (k in foods){

var f=foods[k];

if((f.sweet==swt||!swt)&&(f.health==hlt||!hlt)&&(f.fruit==frt||!frt)) {

picks+=k+"<br>"}

                        }

var str=picks=="Your preferred food(s) are:<br>"?"No foods meet your criteria":picks;                        

document.getElementById("res").innerHTML=str;

        }

</script>

</body>

</html>

xelawho

12-16-2012 02:35 PM

and the second one (although I hope this isn't what you mean by "pop up box")...

Code:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<form>

<select id="taste">

<option value=0> select a taste</option>

 <option value="sweet"> sweet</option>

 <option value="sour"> sour</option>

 <option value="tasty"> tasty</option>

 <option value="bland"> bland</option>

</select> 

<select id="type">

<option value=0> select a type</option>

 <option value="fruit"> fruit</option>

 <option value="vegetable"> vegetable</option>

 <option value="confectionary"> confectionary</option>

</select>

<select id="health">

<option value=0> select healthiness</option>

 <option value="healthy"> healthy</option>

 <option value="unhealthy"> unhealthy</option>

</select>

<input type="button" id="thebutt" value="show selections"/>

</form>



<script type="text/javascript">

document.getElementById("thebutt").onclick=function (){

var foods={

Apples:{taste:"sweet", type:"fruit", health:"healthy"},

Potatoes:{taste:"bland", type:"vegetable", health:"healthy"},

"Fizzy Sweets":{taste:"sweet", type:"confectionary", health:"unhealthy"},

Chips:{taste:"tasty", type:"vegetable", health:"unhealthy"},

Grapes:{taste:"sweet", type:"fruit", health:"healthy"},

Lemons:{taste:"sour", type:"fruit", health:"healthy"},

}



var picks="Your preferred food(s) are:\n"; 

var ta=document.getElementById("taste").value;

var ty=document.getElementById("type").value;

var h=document.getElementById("health").value;

for (k in foods){

var f=foods[k];

if((ta==f.taste||ta==0)&&(ty==f.type||ty==0)&&(h==f.health||h==0)) {

picks+=k+"\n"}

                        }

var str=picks=="Your preferred food(s) are:\n"?"No foods meet your criteria":picks;                                                

alert(str)

        }

</script>

</body>

</html>

xelawho

12-16-2012 02:38 PM

... but a mixture of the two seems better to me...

Code:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<form id="theform">

<select id="taste">

<option value=0> select a taste</option>

 <option value="sweet"> sweet</option>

 <option value="sour"> sour</option>

 <option value="tasty"> tasty</option>

 <option value="bland"> bland</option>

</select> 

<select id="type">

<option value=0> select a type</option>

 <option value="fruit"> fruit</option>

 <option value="vegetable"> vegetable</option>

 <option value="confectionary"> confectionary</option>

</select>

<select id="health">

<option value=0> select healthiness</option>

 <option value="healthy"> healthy</option>

 <option value="unhealthy"> unhealthy</option>

</select>

</form>

<div id="res">

Your food options are:<br>

Apples<br>

Potatoes<br>

Fizzy Sweets<br>

Chips<br>

Grapes<br>

Lemons

</div>

<script type="text/javascript">

var sels=document.getElementById("theform").getElementsByTagName("select");

  for (var i = 0; i < sels.length; i++) {

  sels[i].onchange=thefunc;

}



function thefunc(){

var foods={

Apples:{taste:"sweet", type:"fruit", health:"healthy"},

Potatoes:{taste:"bland", type:"vegetable", health:"healthy"},

"Fizzy Sweets":{taste:"sweet", type:"confectionary", health:"unhealthy"},

Chips:{taste:"tasty", type:"vegetable", health:"unhealthy"},

Grapes:{taste:"sweet", type:"fruit", health:"healthy"},

Lemons:{taste:"sour", type:"fruit", health:"healthy"},

}



document.getElementById("res").innerHTML="";

var picks="Your preferred food(s) are:<br>"; 

 document.getElementById("res").innerHTML="";

var ta=document.getElementById("taste").value;

var ty=document.getElementById("type").value;

var h=document.getElementById("health").value;

for (k in foods){

var f=foods[k];

if((ta==f.taste||ta==0)&&(ty==f.type||ty==0)&&(h==f.health||h==0)) {

picks+=k+"<br>"}

                        }

var str=picks=="Your preferred food(s) are:<br>"?"No foods meet your criteria":picks;                        

document.getElementById("res").innerHTML=str;

        }

</script>

</body>

</html>

yiaggi

12-16-2012 04:07 PM

Hi guys,

Cheers again for your continued help. I totally get that this is not a "free code" forum and it is a little cheeky to ask - I have said that I am only really after being pointed towards a tutorial or some such to get me started! Your help is really appreciated thou :) I am starting at the beginning with hand coding JavaScript and will hopefully be in a position to help someone else on here in the future! I wish I could just 'have a crack' and then ask u guys for help on tweaking .... That would make my (and your life) so much easier! :)

I'll have a look over your suggestions - cheers guys :)

yiaggi

12-16-2012 04:22 PM

Quote:

Originally Posted by xelawho (Post 1300308)

... but a mixture of the two seems better to me...

Code:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<form id="theform">

<select id="taste">

<option value=0> select a taste</option>

 <option value="sweet"> sweet</option>

 <option value="sour"> sour</option>

 <option value="tasty"> tasty</option>

 <option value="bland"> bland</option>

</select> 

<select id="type">

<option value=0> select a type</option>

 <option value="fruit"> fruit</option>

 <option value="vegetable"> vegetable</option>

 <option value="confectionary"> confectionary</option>

</select>

<select id="health">

<option value=0> select healthiness</option>

 <option value="healthy"> healthy</option>

 <option value="unhealthy"> unhealthy</option>

</select>

</form>

<div id="res">

Your food options are:<br>

Apples<br>

Potatoes<br>

Fizzy Sweets<br>

Chips<br>

Grapes<br>

Lemons

</div>

<script type="text/javascript">

var sels=document.getElementById("theform").getElementsByTagName("select");

  for (var i = 0; i < sels.length; i++) {

  sels[i].onchange=thefunc;

}



function thefunc(){

var foods={

Apples:{taste:"sweet", type:"fruit", health:"healthy"},

Potatoes:{taste:"bland", type:"vegetable", health:"healthy"},

"Fizzy Sweets":{taste:"sweet", type:"confectionary", health:"unhealthy"},

Chips:{taste:"tasty", type:"vegetable", health:"unhealthy"},

Grapes:{taste:"sweet", type:"fruit", health:"healthy"},

Lemons:{taste:"sour", type:"fruit", health:"healthy"},

}



document.getElementById("res").innerHTML="";

var picks="Your preferred food(s) are:<br>"; 

 document.getElementById("res").innerHTML="";

var ta=document.getElementById("taste").value;

var ty=document.getElementById("type").value;

var h=document.getElementById("health").value;

for (k in foods){

var f=foods[k];

if((ta==f.taste||ta==0)&&(ty==f.type||ty==0)&&(h==f.health||h==0)) {

picks+=k+"<br>"}

                        }

var str=picks=="Your preferred food(s) are:<br>"?"No foods meet your criteria":picks;                        

document.getElementById("res").innerHTML=str;

        }

</script>

</body>

</html>

Thank you for this! I believe this will get me to where I need to be! :)I realise you have gone above and beyond and truly appreciate it.

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?

Thanks again!

:)

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.

Page 1 of 2

Show 40 post(s) from this thread on one page