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.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to post hidden values with multiple options selected

    Hi There, I have a working code which allows the user to select one or multiple options from a drop down. Text appears alongside depending on their selection. I need to find a way for another area or text box to be populated depending on the original option(s) selected.

    Example: At the moment if the user selects “Orange” as their favourite colour and submits it will display the text “Oranges are Orange” alongside. This is displayed within a <div>. I want it to also display another piece of text, for example “Oranges are a good source of vitamin C” in a seperate <div> and then another <div> showing “You should eat at least one orange a day”.

    This must also work with multiple options. I am sure there is a way to use hidden values etc but I am stuck!

    Here is the code so far - any help is greatly appreciated as I am new to this and really stuck!

    Code:
    <html>
    <head>
    
    [removed]
        var display = {
            text: {
                a: 'Oranges are Orange',
                b: 'Peaches are Peach  ',
                c: 'Lemons are Yellow',
                d: 'Plums are Purple',
                e: 'Apples are Red',
                f: 'Kiwis are Green'
    
            },
            options: new Array(),
            update: function()
            {
                var options = document.forms['formid'].selectName.options;
                
                this.options = new Array();
                
                for(var i = 0; i < options.length; i++)
                {
                    if(options[i].selected)
                    {
                        this.options[this.options.length] = this.text[options[i].value];
                    }
                }
                
                var _display = document.getElementById('display');
                
                _display[removed] = '';
                
                for(i = 0; i < this.options.length; i++)
                {
                    _display[removed] += this.options[i]+'<br />';
                }
            }
        }
    [removed]
    
    </head>
    <body style="background-color:white">
    
    <table border="0" cellpadding="10" width="100%">
    <tr>
    <td width="250" valign="top">
    <p><img src="1.gif"> Select Fruit Colour. Hold down CTRL to select multiple colours then click the best fruit button below</p>
    <form id="formid">
        <select name="selectName" multiple="true" size="8">
            <option value="a">Orange</option>
            <option value="b">Peach</option>
            <option value="c">Yellow</option>
            <option value="d">Purple</option>
            <option value="e">Red</option>
            <option value="f">Green</option>
        </select>
    
    <p><input type="button"></P>
         
        
    </form>
    </td>
    
    <td width="710" valign="top">
    <p><img src="2.gif"> Best Fruits for your colour</p> 
    <div id="display"></div>
    </td>
    </tr>
    </table>
    
    
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I don't understand why you copy the relevant text to you internal options array and then copy that internal options array to the div. Why not just dump the text out to the div on the fly and forget the internal options array???

    What's with all the [removed]?? Is this forum doing that to you?

    Anyway... why can't you just have text1, text2, and text3 arrays and run all the code in parallel on all 3??
    Code:
        var display = {
            text1: {
                a: 'Oranges are Orange',
                b: 'Peaches are Peach  ',
                c: 'Lemons are Yellow',
                d: 'Plums are Purple',
                e: 'Apples are Red',
                f: 'Kiwis are Green'
    
            },
            text2: {
                a: 'Eat Oranges',
                b: 'Eat Peaches',
                etc....
            },
            text3: {
                a: 'Drink Orange juice',
                b: 'Drink Peach juice', 
                etc....
            },
            update: function()
            {
                var options = document.forms['formid'].selectName.options;
                var d1 = document.getElementById('display1');
                var d2 = document.getElementById('display2');
                var d3 = document.getElementById('display3');
     
                d1.innerHTML = d2.innerHTML = d3.innerHTML = "";
    
                for(var i = 0; i < options.length; i++)
                {
                    var opt = options[i];
                    if(opt.selected)
                    {
                        var v = opt.value;
                        d1.innerHTML = this.text1[v1];
                        d2.innerHTML = this.text1[v2];
                        d3.innerHTML = this.text1[v3];
                    }
                }
                
            }
            etc....
    Not sure what you meant by "hidden values". The stuff in the multiple arrays won't be any more visible than what was in the single array.

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Old Pedant,
    Not sure why it has removed part of the code. The first and last ones are simply <script> and </script> and the middles ones were .innerhtml

    Not sure whey the forum removes these as they are both present in your script?

    Many thanks for taking the time to reply to my queery - now that I look at your code I can see where I have taken a long way around a short cut - I will give this a try and let you know how it goes. It is a project for work where our sales reps select a busines issue from a drop down (favourite colour) and it then populates text into 3 different areas - 1 for questions to ascertain the customers problems as they relate to the issue, 1 for questions relating to the possible soultions and then 1 for questions to help build an understanding of the value of our solutions. There are also a few blank text entry boxes for things like customer name, expected closing value etc.

    I don't suppose you know of a way to print out what is showing on the page (all the elements will be shown on a single web page) so the reps don't have to rely on a screen dump? It would have to print the user entered text and also the outputs from the drop down selections which are in the divs....

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sorry, I am having trouble making the code work

    Hi, I tried to use the code you provided but I think I am going wrong where I reference each display variable in the successive divs. I have tried <div id="display1"></div> then display2 then display3.

    When I submit the initial option nothing happens - do I need to change the onclick reference? onclick="display.update()

    Code:
    <html>
    <head>
    
    <script>
    var display = {
            text1: {
                a: 'Oranges are Orange',
                b: 'Peaches are Peach',
                c: 'Lemons are Yellow',
                d: 'Plums are Purple',
                e: 'Apples are Red',
                f: 'Kiwis are Green'
    
            },
            text2: {
                a: 'Eat Oranges',
                b: 'Eat Peaches',
    	    c: 'Eat Lemons',
    	    d: 'Eat Plums',
    	    e: 'Apples are Red',
    	    f: 'Kiwis are Green'		
               
            },
            text3: {
                a: 'Drink Orange juice',
                b: 'Drink Peach juice', 
                c: 'Drink Lemon Juice',
    	    d: 'Drink Plum Juice',
    	    e: 'Drink Apple juice',
    	    f: 'Drink Kiwi juice'
            },
            update: function()
            {
                var options = document.forms['formid'].selectName.options;
                var d1 = document.getElementById('display1');
                var d2 = document.getElementById('display2');
                var d3 = document.getElementById('display3');
     
                d1.innerHTML = d2.innerHTML = d3.innerHTML = "";
    
                for(var i = 0; i < options.length; i++)
                {
                    var opt = options[i];
                    if(opt.selected)
                    {
                        var v = opt.value;
                        d1.innerHTML = this.text1[v1];
                        d2.innerHTML = this.text1[v2];
                        d3.innerHTML = this.text1[v3];
                    }
                }
                
            }
    </script>
    
    </head>
    
    <body style="background-color:white">
    
    <table border="0" cellpadding="10" width="100%">
    <tr>
    <td width="250" valign="top">
    <p><img src="1.gif"> Select colour. Hold down CTRL to select multiple colours then click the button below</p>
    <form id="formid">
        <select name="selectName" multiple="true" size="8">
            <option value="a">Orange</option>
            <option value="b">Peach</option>
            <option value="c">Lemon</option>
            <option value="d">Purple</option>
            <option value="e">Red</option>
            <option value="f">Green</option>
    
        </select>
    
    <p><input type="button" onclick="display.update();" value="Choose Colour" style="color:#ffffff; background:#76b900 font-weight:bold" /></P>
         
        
    </form>
    </td>
    
    <td width="710" valign="top">
    <p><img src="2.gif">Fruits which are the same as your colour</p> 
    <div id="display1"></div>
    <p>&nbsp</p>
    </td>
    <td width="710" valign="top">
    <p><img src="2.gif">What should you eat</p> 
    <div id="display2"></div>
    <p>&nbsp</p>
    </td>
    <td width="710" valign="top">
    <p><img src="2.gif">What should you drink</p> 
    <div id="display3"></div>
    <p>&nbsp</p>
    </td>
    
    </tr>
    </table>
    
    
    </body>
    </html>
    Last edited by ianpow; 11-12-2009 at 01:01 PM. Reason: Mistake at the begining

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    A handful of small errors. I copied and pasted and then goofed on the edits.
    Code:
    <script>
    var display = {
            text1: {
                a: 'Oranges are Orange',
                b: 'Peaches are Peach',
                c: 'Lemons are Yellow',
                d: 'Plums are Purple',
                e: 'Apples are Red',
                f: 'Kiwis are Green'
    
            },
            text2: {
                a: 'Eat Oranges',
                b: 'Eat Peaches',
    	    c: 'Eat Lemons',
    	    d: 'Eat Plums',
    	    e: 'Apples are Red',
    	    f: 'Kiwis are Green'		
               
            },
            text3: {
                a: 'Drink Orange juice',
                b: 'Drink Peach juice', 
                c: 'Drink Lemon Juice',
    	    d: 'Drink Plum Juice',
    	    e: 'Drink Apple juice',
    	    f: 'Drink Kiwi juice'
            },
            update: function()
            {
                var options = document.forms['formid'].selectName.options;
                var d1 = document.getElementById('display1');
                var d2 = document.getElementById('display2');
                var d3 = document.getElementById('display3');
     
                d1.innerHTML = d2.innerHTML = d3.innerHTML = "";
    
                for(var i = 0; i < options.length; i++)
                {
                    var opt = options[i];
                    if(opt.selected)
                    {
                        var v = opt.value;
                        d1.innerHTML += this.text1[v] + "<br/>";
                        d2.innerHTML += this.text2[v] + "<br/>";
                        d3.innerHTML += this.text3[v] + "<br/>";
                    }
                }
                
            }
    }; // this was the biggest mistake...missing the closing right brace
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Many many thanks Old Pedant! I have updated with the changes you provided and it works perfectly!

    I appreciate the time you have taken to help out a newbie and I will be sure to pass on the code with your reference


  •  

    Tags for this Thread

    Posting Permissions

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