0

I am trying to make a selection form, where depending on the select field chosen, I want different information to appear. Here is the way I'd like to represent it:

<form id="myForm">
<select name="options" form="myForm">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
</select>
</form>

<!-- The following will be invisible until selection choice is made -->
<h1>option.name</h1>
<p>option.info</p>

Then, in JSON, I'd like the store the following content. I am using this as the handler just to test it out:

<script>

var data =  {
  "option1" : {
     "name" : "Option 1",
     "info" : "I'm glad you've chosen Option 1"
  },
  "option2" : {
     "name" : "Option 2",
     "info" : "Not a bad choice, either"
  }
};

var myForm = document.getElementById('options');


myForm.addEventListener("change", function() {
    val = this.value;
    alert(data[val][name]);


}, false);

})();

</script>

The output of the alert is empty.

hichris123
  • 10,145
  • 15
  • 56
  • 70
Leon
  • 194
  • 1
  • 1
  • 10
  • show what you've tried. – kennypu Aug 01 '14 at 21:53
  • a) add onchange/onclick/onwhatever handler to your select. b) when triggered, have the handler get the selected value, look it up in your json list, and populate your two h1/p options with the lookupped data. – Marc B Aug 01 '14 at 21:53
  • I've updated my main answer with an attempt. – Leon Aug 01 '14 at 22:11
  • 2
    I don't see you define `data` anywhere, but the error is pretty clear: `data` doesn't have a property called `val`. – Felix Kling Aug 01 '14 at 22:12
  • *"The output of the alert is empty."* You seem to be trying to use the value of `window.name` as property value. `window.name` is usually an empty string. I guess you want `data[val].name`. – Felix Kling Aug 01 '14 at 22:16
  • Thank you! I'm mixing up my array/object accessing. And the JSON was stored in a data variable. – Leon Aug 01 '14 at 22:17

0 Answers0