0

Hi, i have the following script

<html>
<head>
<script type="text/javascript">
function displayResult()
{
var x=document.getElementById("mySelect").selectedIndex;
var y=document.getElementById("mySelect").options;
document.getElementById('result').innerHTML = "You have selected " + y[x].text;
}
function displayResult2()
{
var x=document.getElementById("volume").selectedIndex;
var y=document.getElementById("volume").options;
document.getElementById('result2').innerHTML = "You chose " + y[x].text;
}
</script>
</head>
<body>

<form>
Select Drink<br>
<select multiple="yes" size="7px" id="mySelect">
<option>Coke</option>
<option>Fanta</option>
<option>Mount Franklin</option>
<option>Sprite</option>
<option>Lift</option>
<option>Golburn Valley</option>
<option>Mountain Dew</option>
</select>
<button type="button" onclick="displayResult()">Display index</button>
select quantity
<select multiple="yes" size="7px" id="volume">
<option>375ml</option>
<option>600ml</option>
</select>
<button type="button" onclick="displayResult2()">Display index</button>
</form>
<!--<p>This machine is out of order. a cal has been placed</p>-->

<p id="result"></p>
<p id="result2"></p>
<p id="error"></p>
</body>
</html>

I want to have it so that the 2 joins ina single sentence like "you have chose "drink" which is "how many mls" Any ideas?

3
Contributors
2
Replies
9
Views
5 Years
Discussion Span
Last Post by stbuchok
0

I want to have it so that the 2 joins ina single sentence like "you have chose "drink" which is "how many mls" Any ideas?

Your code is a bit messy. It always good to name your <form>

Instead of this:

<form></form>

Add this:

<form name="cokeform"></form>

As for your button add <input>

Instead of this:

<button type="button" onclick="displayResult()">Display index</button>
<button type="button" onclick="displayResult2()">Display index</button>

Add this:

<input type="button" name="pepsi" onclick="displayResult()">Display index</button>
<input type="button" name="pepsi" onclick="displayResult2()">Display index</button>

As for your javacript it should look like this:

function displayResult(){
if(document.cokeform.pepsi) {
    var x = document.getElementById("mySelect").selectedIndex;
    var y = document.getElementById("mySelect").options;
    document.getElementById("mySelect").selectedIndex = x;
}

function displayResult()2{
if(document.cokeform.pepsi) {
    var x = document.getElementById("volume").selectedIndex;
    var y = document.getElementById("volume").options;
    document.getElementById("volume").selectedIndex = x;
}

So your html code should look like this:

<form name="cokeform">

<p>Select Drink</p><br>
<select multiple="yes" size="7px" id="mySelect">
<option>Coke</option>
<option>Fanta</option>
<option>Mount Franklin</option>
<option>Sprite</option>
<option>Lift</option>
<option>Golburn Valley</option>
<option>Mountain Dew</option>
</select>

<input type="button" name="pepsi" onclick="displayResult()">Display index</button>

<p>Select quantity</p><br>
<select multiple="yes" size="7px" id="volume">
<option>375ml</option>
<option>600ml</option>
</select>

<input type="button" name="pepsi" onclick="displayResult()2">Display index</button>

</form>

It's not test.

Edited by LastMitch

0

using the button tag is fine, just get rid of type="button" as it is not needed in the button tag. Also, LastMitch's code is wrong, so please don't use it (ending button tags for an input?).

I would also use a function similar to this:

function displayResult(resultDiv, startingText, dd){
    var list = document.getElementById(dd);
    document.getElementById(resultDiv).innerHTML = startingText + list.options[list.selectedIndex].text;
}

HTML

<button onclick="displayResult('result', 'You have selected ', 'mySelect');">Display index</button>
<button onclick="displayResult('result2', 'You chose ', 'volume');">Display index</button>

This code is untested and should be used as a guide. basically there is only a need for one function that can handle your two cases. Depending on the button you click will depend on which div the results go into with different starting text and a different dropdown. Now if you ever add an additional dropdown, you don't need to change the function, you just change the parameters you are passing.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.