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>
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.
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....
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> </p>
</td>
<td width="710" valign="top">
<p><img src="2.gif">What should you eat</p>
<div id="display2"></div>
<p> </p>
</td>
<td width="710" valign="top">
<p><img src="2.gif">What should you drink</p>
<div id="display3"></div>
<p> </p>
</td>
</tr>
</table>
</body>
</html>
Last edited by ianpow; 11-12-2009 at 01:01 PM..
Reason: Mistake at the begining
Before you post, read our: 
