HTML select value passed into Javascript var (then used to fetch JSON)

Question

I have looked at many other stack q&a's and can't get to where I need to be to have my code work right. I feel what I am trying to do is simple, apparently not for me.

I have 2 select sections each yielding different info that is needed.

-first is oceanVal

-second is fishVal

I would like the value the user selects to then be sent to my javascript to be used as variables in the following process on fetching data from a JSON var file and then ultimately send it back to my HTML in the oceanOutput (thank you for your help).

html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>OceanMeasure</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <h1>Ocean Measure</h1>
        <div>
            <p>Where will you be fishing?</p>
            <form>
                <select name="oceanVal" id="oceanVal">
                    <option value="" disabled="disabled" selected="selected">Please select</option>
                    <option value="gulf">Gulf</option>
                    <option value="atlantic">Atlantic</option>
                </select>
            </div>
            <div>
                <p>What fish would you like to look up?</p>
                <select name="fishVal" id="fishVal">
                    <option value="" disabled="disabled" selected="selected">Please select</option>
                    <option value="dolphin">Dolphin</option>
                    <option value="blackfin tuna">Blackfin Tuna</option>
                    <option value="snook">Snook</option>
                </select>
            </div>
            <button>Get Info</button>
        </form>
        <div id="oceanOutput"></div>

        <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
        <script type="text/javascript" src="js/data.json"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </body>
</html>

javascript:

(function(){
// var userOcean = prompt("What ocean will you be fishing in?");
// var userFish = prompt("What fish would you like to look up?");

var userOcean = document.getElementById("oceanVal");
var userFish = document.getElementById("fishVal");



console.log(
  "\n\nfish:  "+jsonObject.ocean_measure[userOcean].fish[userFish].name+
  "\n\nlength:  "+jsonObject.ocean_measure[userOcean].fish[userFish].length+
  "\n\nclosed:  "+jsonObject.ocean_measure[userOcean].fish[userFish].closed+
  "\n\nlimit:  "+jsonObject.ocean_measure[userOcean].fish[userFish].limit+
  "\n\nremarks:  "+jsonObject.ocean_measure[userOcean].fish[userFish].remarks
);

})();

my prompts work but not my html gets. so if you want to see it operate just do the prompts and thats what I want it to do but with using my form when is clicked. and I haven't reached the output part yet.

(not sure if it's needed but here is my JSON -I'm going to minify it.)

JSON:

var jsonObject = {"ocean_measure":{"gulf":{"fish":{"dolphin":{"name":"Mahi-mahi","length":"none","limit":"10 per person or 60 per vessel whichever is less"},"blackfin tuna":{"name":"Blackfin Tuna","length":"not regulated","limit":"The default bag limit for all unregulated species is two fish or 100 pounds per day, whichever is more"},"snook":{"name":"Snook","length":"Not less than 28 inches total length (TL) or more than 33 inches TL","closed":"Dec. 1-end of February; May 1-Aug. 31","limit":"1 per harvester per day","remarks":"Snook permit required for harvest when saltwater license required. State regulations apply in federal waters. Illegal to buy or sell snook. Fish must remain in whole condition until landed ashore (heads, fins, and tails intact). Snatch hooks and spearing prohibited. Harvest prohibited by or with the use of any multiple hook in conjuction with live or dead bait."}}},"atlantic":{"fish":{"dolphin":{"name":"Mahi-mahi","length":"20 inches fork length","limit":"10 per person or 60 per vessel whichever is less"},"blackfin tuna":{"name":"Blackfin Tuna","length":"not Regulated","limit":"The default bag limit for all unregulated species is two fish or 100 pounds per day, whichever is more"},"snook":{"name":"Snook","length":"Not less than 28 inches total length (TL) or more than 32 inches TL","closed":"Dec. 15 to Jan. 31, June 1 to Aug. 31","limit":"1 per harvester per day","remarks":"Snook permit required for harvest when saltwater license required. State regulations apply in federal waters. Illegal to buy or sell snook. Fish must remain in whole condition until landed ashore (heads, fins, and tails intact). Snatch hooks and spearing prohibited. Harvest prohibited by or with the use of any multiple hook in conjuction with live or dead bait."}}}}}

Also, the JSON file is currently small so although an if(input == option){code...} etc... wouldn't be ideal seeing as I will be getting the JSON file upwards to 40+ fish on each gulf and atlantic. — Carl
– Carl, Commented Jul 23, 2016 at 19:31

slashsharp · Accepted Answer · 2016-07-23 20:13:58Z

You need to pass the selected option value not the object

Eg:

userOcean.options[userOcean.selectedIndex].value

(function(){

var jsonObject = {
  "ocean_measure": {
    "gulf": {
      "fish": {
        "dolphin": {
          "name": "Mahi-mahi",
          "length": "none",
          "limit": "10 per person or 60 per vessel whichever is less"
        },
        "blackfin tuna": {
          "name": "Blackfin Tuna",
          "length": "not regulated",
          "limit": "The default bag limit for all unregulated species is two fish or 100 pounds per day, whichever is more"
        },
        "snook": {
          "name": "Snook",
          "length": "Not less than 28 inches total length (TL) or more than 33 inches TL",
          "closed": "Dec. 1-end of February; May 1-Aug. 31",
          "limit": "1 per harvester per day",
          "remarks": "Snook permit required for harvest when saltwater license required. State regulations apply in federal waters. Illegal to buy or sell snook. Fish must remain in whole condition until landed ashore (heads, fins, and tails intact). Snatch hooks and spearing prohibited. Harvest prohibited by or with the use of any multiple hook in conjuction with live or dead bait."
        }
      }
    },
    "atlantic": {
      "fish": {
        "dolphin": {
          "name": "Mahi-mahi",
          "length": "20 inches fork length",
          "limit": "10 per person or 60 per vessel whichever is less"
        },
        "blackfin tuna": {
          "name": "Blackfin Tuna",
          "length": "not Regulated",
          "limit": "The default bag limit for all unregulated species is two fish or 100 pounds per day, whichever is more"
        },
        "snook": {
          "name": "Snook",
          "length": "Not less than 28 inches total length (TL) or more than 32 inches TL",
          "closed": "Dec. 15 to Jan. 31, June 1 to Aug. 31",
          "limit": "1 per harvester per day",
          "remarks": "Snook permit required for harvest when saltwater license required. State regulations apply in federal waters. Illegal to buy or sell snook. Fish must remain in whole condition until landed ashore (heads, fins, and tails intact). Snatch hooks and spearing prohibited. Harvest prohibited by or with the use of any multiple hook in conjuction with live or dead bait."
        }
      }
    }
  }
};

var userOcean = document.getElementById("oceanVal");
var userFish = document.getElementById("fishVal");
var buttonInfo = document.getElementById("getInfo");
var output = document.getElementById("oceanOutput");

buttonInfo.addEventListener('click', function() {
  var ocean = userOcean.options[userOcean.selectedIndex].value;
  var kind = userFish.options[userFish.selectedIndex].value;
  output.innerHTML = "<h1>Info:</h1>"+
    "<p>Name: "+jsonObject.ocean_measure[ocean]['fish'][kind].name+"</p>"+
    "<p>Length: "+jsonObject.ocean_measure[ocean]['fish'][kind].length+"</p>"+
    "<p>Limit: "+jsonObject.ocean_measure[ocean]['fish'][kind].limit+"</p>";
});
})();

       <h1>Ocean Measure</h1>
        <div>
            <p>Where will you be fishing?</p>
            <form>
                <select name="oceanVal" id="oceanVal">
                    <option value="" disabled="disabled" selected="selected">Please select</option>
                    <option value="gulf">Gulf</option>
                    <option value="atlantic">Atlantic</option>
                </select>
            </div>
            <div>
                <p>What fish would you like to look up?</p>
                <select name="fishVal" id="fishVal">
                    <option value="" disabled="disabled" selected="selected">Please select</option>
                    <option value="dolphin">Dolphin</option>
                    <option value="blackfin tuna">Blackfin Tuna</option>
                    <option value="snook">Snook</option>
                </select>
            </div>
            <button id="getInfo">Get Info</button>
        </form>
        <div id="oceanOutput"></div>

so I've fixed the code, and everytime I click the button it executes but then it says in console: Navigated to file:///Users/<myName>/Desktop/portfolio1/oceanMeasure/index.html?oceanVal=gulf&fishVal=snook Then the page refreshes, clearing console, and clearing the innerHTML we did, for output.
in HTML I needed to make my <button id="getInfo">Get Info</button> be <button type="button" id="getInfo">Get Info</button>

Collectives™ on Stack Overflow

HTML select value passed into Javascript var (then used to fetch JSON)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related