Функция Javascript не срабатывает при нажатии

    {% extends 'base.html' %}
    {% block title %}Search{% endblock %}
    {% block content %}
    <script>

Я хочу, чтобы этот javascript срабатывал, когда я нажимаю на кнопку отправки. По какой-то причине он запускает код на стороне сервера, а не этот javascript. Когда я нажимаю на кнопку отправки, технически должен срабатывать код javascript, но вместо этого запускается функция представления из кода, расположенного позади

        document.getElementById('submit').addEventListener('click',function(){
            search_input = document.getElementById("search");
            if(search_input=="" || search_input==null){
                alert("Enter something");
            }
        });
    </script>
    <div class="container-fluid">
        <div class="row" style="margin-top:200px;">
            <div class="col-md-6 mx-auto">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <center>Enter username</center>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <hr>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <form id="search_form" name="search_form" action="{% url 'search' %}" method="post">
                                    {% csrf_token %}
                                    <div class="form-group">
                                        <input type="text" name="search" id="search" class="form-control" placeholder="Enter username" onclick="return test()">
                                    </div>
                                
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col">
                               <button type="submit" id="submit" class="btn btn-primary btn-lg" style="width:100%">Search</button>
                            </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}

</form>
<button  id="submit" class="btn btn-primary btn-lg" style="width:100%">Search</button>