Javascript code does not execute?

Question

I'm working on a 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:

<script>

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

</script

This is nested inside a head 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, and the python code does work on the value 'nothing', which gives errors.

EDIT: Upon adding further functionality to my project by adding more javascript code, the javascript code again didn't work. I used google chrome's developer tools and stumbled upon this error which seems to be related to why the code isn't working:

Uncaught TypeError: $(...).addEventListener is not a function
    at (index):18

@CertainPerformance, forgot to mention it was nested inside a head tag. And there are no console errors, even when writing console.log in an else statement. — raffayatiq, May 23 '18 at 04:07
It *should* result in an error because `#submit` does not exist when the script is executed. Put the JS in a separate file and give the script tag the `defer` attribute, maybe? — CertainPerformance, May 23 '18 at 04:08
Possibly a duplicate of: https://stackoverflow.com/questions/5873221/jquery-event-bubbling-and-how-click-live-click-stoppropagation-and-re/5873487#5873487 — Markus, May 23 '18 at 04:11

score 1 · Accepted Answer · answered May 23 '18 at 04:04

1

Try event.preventDefault():

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

<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>

answered May 23 '18 at 04:04

Mamun

66,969
9
47
59

@RaffayAtiq, I don't know where this does not work....the code snippet shows that it works...... – Mamun May 23 '18 at 04:27
that's weird, the code snippet does not work for me. Is my browser unsupported? I'm using an up to date Google Chrome browser. – raffayatiq May 23 '18 at 04:29
@RaffayAtiq, Browser should not be problem here. Did you try to debug your code? – Mamun May 23 '18 at 04:32
I don't know how to properly debug, but i'm using CS50's debugger, which is telling me that the value 'nothing' is being passed to my Flask route, so either the script is not executing at all or the if statement is evaluating to be false. – raffayatiq May 23 '18 at 04:35

score 0 · Answer 2 · answered May 23 '18 at 04:06

It is just a declaration of Code if you don't bind to $( document ).ready() or make it as self-invoking function.

First solution:



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

Another Solution:

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

Javascript code does not execute?

2 Answers2