Javascript код не выполняется?

Question

Я работаю над проектом.Я пытаюсь сделать свой код таким образом, чтобы, когда пользователь отправляет параметр из раскрывающегося меню, если пользователь выбирает и отправляет значение по умолчанию («Выберите жанр»), форма не отправляется и страница не обновляется.Ниже приведен мой код Javascript:

<script>

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

</script

Он вложен в тег head.

Ниже приведен мой HTML-код для формы:

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

Javascript некажется, не работает, поскольку даже когда я отправляю форму при выборе опции «Выбрать жанр», моя форма все еще отправляется, и код python работает со значением «ничто», что приводит к ошибкам.

РЕДАКТИРОВАТЬ: После добавления дополнительных функций в мой проект путем добавления большего количества кода JavaScript, код JavaScript снова не работал.Я использовал инструменты разработчика Google Chrome и наткнулся на эту ошибку, которая, кажется, связана с тем, почему код не работает:

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

Answer 1

Это просто объявление кода, если вы не привязываетесь к $( document ).ready() или не делаете его как self-invoking function.

Первое решение:

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

Другое решение:

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

Answer 2

Попробуйте 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>