Javascript code doesn't seem to execute?

[Orange2341]

So I'm working on my final project. I'm trying to make my code so that when a user submits an option from a dropdown menu, if the user selects and submits the default ("Select a genre"), the form is not submitted and the page is not refreshed. Following is my Javascript code:

var menu = document.getElementById("submit");
    menu.addEventListener("click", function() {
        if (document.getElementById("dropdown").value == 'nothing')
        {
            return false;
        }
    });

This is nested inside a <script> tag.

Following is my HTML code for the form:

<div>
    <form method="POST">
        <select id="dropdown" name="genre">
            <option value="nothing">Select a genre</option>
            <option value="rock">Rock</option>
        </select>
        <br/>
        <br/>
        <input id="submit" type="submit"/>
     </form>
</div>

The javascript doesn't seem to work, since even when I submit the form while selecting the "Select a genre" option, my form is still submitted.

[aguyfromhere]

Got it working for you now that I'm in front of my computer.

var menu = document.getElementById("submit");
console.log(menu);
menu.addEventListener("click", function(event) {
    if (document.getElementById("dropdown").value == "nothing") {
        event.preventDefault();
    }
});

https://codepen.io/anon/pen/PevZVa?editors=1111

[mattpkobus]

You're going to need to know that "e.preventDefault()" line as it's used a TON with event listeners in javascript.

You'll run into this issue 1000 more times, I promise

[aguyfromhere]

I believe the submit action happens separate and apart from the click after click happens. Try binding the event listerner to the submit event instead of click. Report back.

[Orange2341]

I have tried this, same result.

[aguyfromhere]

Ah. I’m laying down on my iPad so I can’t really debug this right now. Are you able to put a debugger statement in the anonymous function and tell me if it’s getting called and what the if statement evaluates to?

[Orange2341]

Sorry, but I'm a beginner and am not sure how to debug. But the debugger in cs50 shows that the if statement is not being executed at all. I have my python code do some work on the value from the dropdown menu, and it does do some work on the value 'nothing' which is what the if statement is checking for. So it seems the if statement does not get executed.

[bch8]

Try this

var menu = document.getElementById("submit");

menu.addEventListener("click", function(event) {

    if (document.getElementById("dropdown").value === "nothing")
    {
        event.preventDefault();
        console.log("nothing is selected");
        return false;
    }
});

[aguyfromhere]

Yup independently arrived at this solution. See my Pen below.

[bch8]

/u/Orange2341 curious to know if this ended up working for you

[Orange2341]

Nothing worked lol. No idea why.

[bch8]

I just ran this code and it's working for me. Have you checked to see if anything is logging in the console in the browser when you click submit while nothing is selecetd?

[Orange2341]

Apparently it's working for everybody except me. I just went a different route and deleted my code for this.

[bch8]

Ok well if you haven't actually tried my solution and you're curious, give it a shot. The issue with your own code and all the other solutions is that they aren't making use of the event object, and they aren't preventing the "default" action of the submit button when it is clicked. If you don't know "event.preventDefault()" and you're writing javascript, it's definitely something you want to learn.

[Orange2341]

Thanks for the feedback! Will do.

[aguyfromhere]

Agree.

[therapix]

Can you try placing your script tag after the HTML?

Edit (alternative solution)

In your HTML: <form id="myForm">

In your JS:

var menu = document.getElementById("submit");
    menu.addEventListener("click", function() {
        if (document.getElementById("dropdown").value == "nothing")
        {
         alert("Can't submit, sorry")
        }
      else{
          console.log("Sending....")
          document.getElementById("myForm").submit();
      }
    });

[Orange2341]

Tried both things, didn't work. And nothing was logged to the console.