HTML website display option - html

Question

I am a beginner in HTML programming and I have the following question.
Im working on a simple try-out.
I have following selection menu:
<p>Kies de frisdrank:</p>
<select id="frisdrank">
<option value="Cola"> Cola </option>
<option value="Fanta"> Fanta </option>
<option value="spuitwater"> spuitwater </option>
<option value="chocolademelk"> chocolademelk </option>
</select>
I also have a button:
<input id="OK" type="button" value="OK">
Now how do I display a text somewhere or a label that says what option is selected when I press the button? I understand this is very basic but still I cant handle to do this.
** UPDATE!!! **
Thanks everyone already for the help! Now I figured out how to do this.
Here is my followup question :
Can I add another textfield with a matching price? Like if you select Cola then the price is for example 20. And If you select fanta the price is 25?
I figured out the javascript. I already have a little bit experience with normal Java.
Thanks for helping me out!

Answer 1

I suggest you to try jQuery:
$("#OK").click(function() {
$("#value").text($("#frisdrank").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Kies de frisdrank:</p>
<select id="frisdrank">
<option value="Cola"> Cola </option>
<option value="Fanta"> Fanta </option>
<option value="spuitwater"> spuitwater </option>
<option value="chocolademelk"> chocolademelk </option>
</select>
<input id="OK" type="button" value="OK">
<span id="value"></span>

Answer 2

just to explain
1. onclick= to attach a onClick event to your button and it will run the function inside of onClick, this case myFunction.
2. use getElementById to get the element you want
3. use .value to get the value of the selected option
4. you can use that value whatever you want. use innerHTML to place in body.
function myFunction() {
var selectElement = document.getElementById('selectId');
var selectValue = selectElement.value;
alert(selectValue);
}
<select id='selectId'>
<option>1</option>
<option>2</option>
</select>
<button id='buttonId' onclick='myFunction();'>click</button>

Answer 3

function a()
{
var obj = document.getElementById('frisdrank');
document.getElementById('selected').innerHTML = obj.options[obj.selectedIndex].innerHTML;
}
<p>Kies de frisdrank:</p>
<select id="frisdrank">
<option value="Cola"> Cola </option>
<option value="Fanta"> Fanta </option>
<option value="spuitwater"> spuitwater </option>
<option value="chocolademelk"> chocolademelk </option>
</select>
<input id="OK" type="button" value="OK" onclick="a();">
<br><span id="selected">hi</span>

Answer 4

You can have price associated as follow:
JavaScript code:
$("#OK").click(function() {
Var comboValue = $("#frisdrank").val();
$("#value").text(comboValue);
If(comboValue == "Cola")
$("#price").text("10");
Else If(comboValue == "Fanta")
$("#price").text("12");
. . . . . .
});
HTML code will looks like this:
<script src="https:// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Kies de frisdrank:</p>
<select id="frisdrank">
<option value="Cola"> Cola </option>
<option value="Fanta"> Fanta </option>
<option value="spuitwater"> spuitwater </option>
<option value="chocolademelk"> chocolademelk </option>
</select>
<input id="OK" type="button" value="OK">
Selected Drink: <span id="value"></span> </br>
Price:<span id="price"></span>
Simply you can have an element on HTML and on some event you can change value of that element or even you can create new elements dynamically using javascript.

Answer 5

try this
<p>Kies de frisdrank:</p>
<select id="frisdrank">
<option value="Cola">Cola</option>
<option value="Fanta">Fanta</option>
<option value="spuitwater">spuitwater</option>
<option value="chocolademelk">chocolademelk</option>
</select>
<input id="OK" type="button" value="OK" onclick="foo()">
<div id="frisdrankSelected"></div>
<script>
function foo() {
var e = document.getElementById("frisdrank");
var strUser = e.options[e.selectedIndex].value;
document.getElementById("frisdrankSelected").innerHTML = strUser;
}
</script>
the function foo will replace the content of the div with id frisdrankSelected with the text selected from the dropdown
here the jsfiddle to test it: https://jsfiddle.net/m4mphbgc/

Answer 6

You can also use PHP.
JavaScript will run on the computer and PHP will run on the server. If you don't want the user to read your code; don't use JavaScript..
Example with PHP:
<form method="POST">
<select id="frisdrank" name="selection">
<option value="Cola"> Cola </option>
<option value="Fanta"> Fanta </option>
<option value="spuitwater"> spuitwater </option>
<option value="chocolademelk"> chocolademelk </option>
</select>
<input id="OK" type="submit" value="OK">
</form>
<?php
if(isset($_POST['selection'])){
echo "You have selected".$_POST['selection'];
}
?>
(echo will print out the result and $_POST is a variable)
To get PHP working on your computer, you will need to create a local server (or you can upload the code to a server).
Please compare the languages Read here