Member Avatar for web01

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
  • 136 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by stbuchok
Member Avatar for LastMitch

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
Member Avatar for stbuchok

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.