Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    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!


  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.


  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by yiaggi View Post
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Last edited by AndrewGSW; 12-15-2012 at 05:03 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by AndrewGSW View Post
    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.
    Snag - IE will not allow you to set the display to none on option elements.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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

    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'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #9
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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!

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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>
    Last edited by Philip M; 12-16-2012 at 10:38 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ... 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>

  • #14
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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

  • #15
    New Coder
    Join Date
    Feb 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    ... 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 ........
    Last edited by yiaggi; 12-16-2012 at 04:28 PM. Reason: added


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •