Django Bootstrap Search Bar on Navigation Bar – Html

I have made a search bar on the navigation bar. What I want to do is I can directly search it on the search bar on navigation bar, then when I hit the search button, it show show the result. However, when I search it, it has no response. I was wondering is it because I have made a separated file for my navigation bar – navbar.html. So that I just can make links on the navigation bar?

navbar.html

<nav>
        <ul>
            {% if user.is_authenticated %}        
            <form class="form-inline" action="{% url 'search_journal' %}" method="GET">
                <input class="form-control mr-sm-2" type="search" name="q" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
            <li><a href="{% url 'journal_list' %}">HOME</a></li>
            <li><a href="{% url 'journal_list_favourite' %}">FAVORITE</a></li>
            <li><a href="{% url 'logout' %}">LOGOUT</a></li>
            <li class="profile"> 
            <div class="profile-img-container">
                <a href="{% url 'profile' %}"><img id="profile-img" src="{{ user.profile.image.url }}" alt="Profile Picture"></a>
            </div>
            <li class="nav-item">
              <a class="nav-link active" href="#">Hi {{user.username}}</a>
            </li>
            {% else %}
            <li class="nav-item">
              <a>Please Login!</a>
            </li>
            {% endif %}
        </ul> 
    </nav>

views.py

@login_required
def search_journal(request):
    if request.method == 'GET':
        query= request.GET.get('q')

        submitbutton= request.GET.get('submit')

        if query is not None:
            lookups= Q(title__icontains=query) | Q(content__icontains=query)

            results= Journal.objects.filter(lookups).distinct()

            context={'results': results,
                     'submitbutton': submitbutton}

            return render(request, 'audioJournaling/search_journal.html', context)

        else:
            return render(request, 'audioJournaling/search_journal.html')

    else:
        return render(request, 'audioJournaling/search_journal.html')

search_journal.html

{% extends "base.html" %}

{% block content %}


<h1>Search Page</h1>

<br/>
<!-- <form action="{% url 'search_journal' %}" method="GET" value="{{request.GET.q}}">
Search <input type="text" name="q" value="{{request.GET.q}}" placeholder="Search posts"/>
<input type="submit" name="submit" value="Search"/>
</form> -->


{% if submitbutton == 'Search' and request.GET.q != '' %}
{% if results %}
<h1>Results for <b>{{ request.GET.q }}</b></h1>
<br/><br/>
<div class = "container mt-4 mb-4">
    <div class="center_journal">
        <div class="col">
            <div class="row">   
                {% for result in results %}
                <div class="card col-4 " style="width: 36rem;">
                    <h5 class="card-title text-center mt-4">{{ result.title }}</a></h5>
                    {% if result.photo %}
                    <img src="{{ result.photo.url }}" class="card-img-top" alt="...">
                    {% endif %}
                    <div class="card-body">
                        {% if result.audio %}
                        <audio controls>
                            <source src="{{ result.audio.url }}" type="audio/ogg">
                            <source src="{{ result.audio.url }}" type="audio/mpeg">
                            <source src="{{ result.audio.url }}" type="audio/wav">
                            Your browser does not support the audio element.
                        </audio>
                        {% endif %}
                        <p class="card-content">{{ result.content }}</p>
                        <p class="text-center font-weight-light">Created on {{ result.date_created|date:'Y-m-d H:i' }}</p>
                        {% if result.favourite %}
                        <div class="text-center">
                            <button type="button" class="btn btn-outline-info">Favourite</button>
                        </div>
                        {% endif%}
                        <div class="text-center">
                            <a href="{% url 'journal_detail' result.id %}" ><button class=" btn btn-outline-info">View</button></a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% else %}
No search results for this query
{% endif %}
{% endif %}

{% endblock %}

urls.py

path('search/',views.search_journal,name="search_journal"),

When I comment out the code line in search_journal.html,

<form action="{% url 'search_journal' %}" method="GET" value="{{request.GET.q}}">
Search <input type="text" name="q" value="{{request.GET.q}}" placeholder="Search posts"/>
<input type="submit" name="submit" value="Search"/>
</form>

I will get something like this:
For example I type ‘s’ in the search bar:
search for s

I will get:
result

I will need to search again to get the result.

I have also tried to just paste the code to navbar.html, but it doesn’t work.