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
– raffayatiq, Commented May 23, 2018 at 4: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
– CertainPerformance, Commented May 23, 2018 at 4:08
Possibly a duplicate of: stackoverflow.com/questions/5873221/… — Markus
– Markus, Commented May 23, 2018 at 4:11

Mamun · Accepted Answer · 2018-05-23 04:04:19Z

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, 2018 at 4:04

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mamun Over a year ago

@RaffayAtiq, I don't know where this does not work....the code snippet shows that it works......

raffayatiq Over a year ago

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.

Mamun Over a year ago

@RaffayAtiq, Browser should not be problem here. Did you try to debug your code?

raffayatiq Over a year ago

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.

Sam Ho · Accepted Answer · 2018-05-23 04:06:13Z

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;
            }
        });
}());

Collectives™ on Stack Overflow

Javascript code does not execute?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related