Using Javascript with HTML to get a selected option and display a String based on value

Question

Sorry if this has been asked before, I've looked around (this site and a couple others) for examples and snippets of code but nothing seems to work.

I'm taking a course in HTML, an assignment requires using a script to check a ddl and display a line of text based on the selected option. The problem is that what I've found online seems a bit different to the example our teacher provided (we're using Dreamweaver 2015 if that makes a difference.)

Here's what I'm stuck with after a couple hours of cannibalizing code from a few different threads.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <title> Hot Buns </title>
 </head>

<script type="text/javascript">
function showDetails()
        {
         var x= document.getElementById("slctOrder");
         var val= x.options[x.selectedIndex].text; 
<!-- DW only displays item(n) and len after the dot, I typed in "text" manually -->
         document.forms["frmOrder"]["Details"].value = val;
<!-- I'm just trying to have it display anything at this point, 
same as above, I typed "value" since DW doesn't seem to recognize this code 
(this is from the teacher's example) -->
        }

</script>
<body>
<p> <h2> Welcome to Hot Buns </h2> <br> <h3> Ham can we bee'f service? </h3></p>
<p> <h2> Place an order </h2> </p>
<form method="get" name="frmOder">
<select name="slctOrder" onChange="showDetails();"> 
<!-- I'm trying to call the function showDetails() 
but neither onChange here nor onClick in the option tag seem to accomplish that -->
    <option hidden selected="selected" value="0"> please select one of today's specials </option>
    <option value="1" onClick="showDetails();"> Last of the Mo-jicama </option>
    <option value="2" onClick="showDetails();"> Cheesus Is Born Burger </option>
    <option value="3" onClick="showDetails();"> Beets of Burden Burger </option>
    <option value="4" onClick="showDetails();"> Paranormal Pepper Jack-tivity Burger </option>
</select>

<output name="Details"/>
</form>

</body>
</html>

What's wrong with it? What isn't working? – dstarh Oct 20 '16 at 20:51 — dstarh, Oct 20 '16 at 20:51

Benny Lin · Accepted Answer · 2016-10-21T14:03:57.110

Couple of minor changes, but here's the working example:

update: outputting selected value into an html element vs alert.

update 2: i've changed the code to match exactly what you have but fixed some of errors to get it to work.

1) You have a typo of the form name "frmOder" but in your code, you used "frmOrder".

document.forms["frmOder"]["Details"].value = val;

2) You are trying to select the element by id but the id attribute doesn't exist:

document.getElementById("slctOrder");

Had to change:

<select name="slctOrder" onChange="showDetails();">

to:

<select id="slctOrder" onChange="showDetails();">

3) There's no need for the onclick events in the option tags.

The reason i switched out the 'output' element in my original answer is because it is not a supported tag in IE. http://www.w3schools.com/tags/tag_output.asp

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <title> Hot Buns </title>
 </head>

<script type="text/javascript">
function showDetails()
        {
         var x= document.getElementById("slctOrder");
         var val= x.options[x.selectedIndex].text; 

         document.forms["frmOder"]["Details"].value = val;
        }

</script>
<body>
<p> <h2> Welcome to Hot Buns </h2> <br> <h3> Ham can we bee'f service? </h3></p>
<p> <h2> Place an order </h2> </p>
<form method="get" name="frmOder">
<select id="slctOrder" onChange="showDetails();"> 
<!-- I'm trying to call the function showDetails() 
but neither onChange here nor onClick in the option tag seem to accomplish that -->
    <option hidden selected="selected" value="0"> please select one of today's specials </option>
    <option value="1"> Last of the Mo-jicama </option>
    <option value="2"> Cheesus Is Born Burger </option>
    <option value="3"> Beets of Burden Burger </option>
    <option value="4"> Paranormal Pepper Jack-tivity Burger </option>
</select>

<output name="Details"/>
</form>

</body>
</html>

thanks for the corrections, but I'm trying to display the text in the VBasic equivalent of a label, which is why I tried using inside the form. I just can't get it to interact with the script in the way I need (no "value" showing up after the dot). — Blitzilla, Oct 20 '16 at 21:15
updated code to show selected value in html element vs alert prompt. the text is showing up right below the select menu. — Benny Lin, Oct 20 '16 at 21:21
Exactly what I needed. Is this div (element?) what's usually used in HTML as a label (static textbox)? In the example, the teacher used this tag to display the text, and the script could interact with its "value" property but mine wouldn't for some reason. Here's the teacher's function: { x= document.forms["myform"]["textinput"].value; document.forms["myform"]["result"].value = x; }. Sorry for being troublesome, but I'd like to know why my function didn't work like the teacher's. — Blitzilla, Oct 20 '16 at 21:46
updated answer to match your setup and added more details to why your original code didn't work like your teachers. — Benny Lin, Oct 21 '16 at 14:06

score 0 · Answer 2 · answered Oct 20 '16 at 21:35

You can simplify the markup (changed portion here) and the code, adding an event listener.

Markup(revised)

<form method="get" id="frmOder">
  <select id="slctOrder">
    <option hidden selected="selected" value="0"> please select one of today's specials </option>
    <option value="1"> Last of the Mo-jicama </option>
    <option value="2"> Cheesus Is Born Burger </option>
    <option value="3"> Beets of Burden Burger </option>
    <option value="4"> Paranormal Pepper Jack-tivity Burger </option>
  </select>
  <output id="Details" />
</form>

Code

function showDetails(event) {
  console.log(event);
  // var x = document.getElementById("slctOrder");
  var x = event.srcElement;// same as above but use the event
  var val = x.options[x.selectedIndex].text;

  // no need for above, just get the text value (assumes single select)
  var t = event.srcElement.selectedOptions[0].text;
  document.getElementById("Details").value = t;
}
// add event listener to select
var el = document.getElementById("slctOrder");

el.addEventListener("change", showDetails, false);

Note you COULD still use the name to select: (but it returns a collection so [0] needed for first one)

document.getElementsByName("slctOrder")[0];

Sample fiddle to play with:https://jsfiddle.net/MarkSchultheiss/j28cpsg9/

welp.. this is almost too advanced for me, but I think I get it. This one feels.. natural and opens up more options (assuming there are more events to use with other elements as well), I'll just look up more details and tinker with it until I get the hang of how it works. And thanks for introducing me to JsFiddle, useful stuff. — Blitzilla, Oct 20 '16 at 22:07
Events are key to modern web pages, get started here: https://developer.mozilla.org/en-US/docs/Web/Events - start with a simple button and a "click" event for learning, there are a number of good things here. Click: https://developer.mozilla.org/en-US/docs/Web/Events/click — Mark Schultheiss, Oct 21 '16 at 12:36

Using Javascript with HTML to get a selected option and display a String based on value

2 Answers2

Linked