'My search bar backend config is not properly responding to my condition statement

I am currently configuring(backend) my search-bar in my Django project to search the database. I've put an 'if or else' statement for when the user just clicks the search button without putting anything in the search-box. The 'if or else' statement seems not to be working properly because it ignores the 'if' part and goes straight to the else part. I've tried different ways to fix it but I seem to be failing. How do I rectify this.

function openNav() {
                  document.getElementById("mynavbar").style.display = "block";
                }
                function closeNav() {
                  document.getElementById("mynavbar").style.display = "none";
                  }

.navbar{
    position: absolute;
    height: 102px;
    width: 1136px;
    left: 69px;
    top: 39px;
    border-radius: 0px;
}
.nav-menu{
    display: none;
}
.closebtn{
    display: none;
}
.logo img{
    position: absolute;
    height: 57.599998474121094px;
    width: 100px;
    left: 12px;
    top: 31px;
    border-radius: 0px;
}
.HOME{
    position: absolute;
    height: 38.10988998413086px;
    width: 97.52754211425781px;
    left: 203.26788330078125px;
    top: 48.19781494140625px;
    border-radius: 0px;
    font-family: Poppins;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    text-align: left;
    /* background: #FFFFFF; */
}
.ARTIST{
    position: absolute;
    height: 38.10988998413086px;
    width: 105.85134887695312px;
    left: 328.64324951171875px;
    top: 48.19781494140625px;
    border-radius: nullpx;
    font-family: Poppins;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    text-align: left;
    /* background: #FFFFFF; */
}
.ABOUTUS{
    position: absolute;
    height: 38.10988998413086px;
    width: 142.14324951171875px;
    left: 475.8270263671875px;
    top: 48.19781494140625px;
    border-radius: nullpx;
    font-family: Poppins;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    text-align: left;
    /* background: #FFFFFF; */
}
.search-bar{
    position: absolute;
    height: 38.109893798828125px;
    width: 177.427001953125px;
    left: 655.270263671875px;
    top: 50.4395751953125px;
    border-radius: 45px;
    background: #FFFFFF42;
    border: 3px solid #FFFFFF;
}
#search-area{
    position: absolute;
    height: 38.109893798828125px;
    width: 177.427001953125px;
    left: -3px;
    top: -4px;
    border-radius: 45px;
    background: #FFFFFF42;
    border: 3px solid #FFFFFF;
    font-family: 'Poppins';
    font-size: 19px;
    font-weight: 700;
}
.search-icon{
    position: absolute;
    height: 30px;
    width: 24.251404px;
    left: 136px;
    top: 0px;
    border-radius: 0px;
}
.bi-search{
    position: absolute;
    height: 30px;
    width: 24.251404px;
    left: 0px;
    top: 0px;
    border-radius: 0px;    
}
.rec{
    position: absolute;
    height: 45.95604705810547px;
    width: 119.96490478515625px;
    left: 1013.1486206054688px;
    top: 42.593414306640625px;
    border-radius: 10px;
    background: #7e81d1;
}
.SignIn{
    position: absolute;
    height: 38.109893798828125px;
    width: 98.553955078125px;
    left: 10px;
    top: 0;
    border-radius: 0px;
    font-family: Poppins;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    text-align: left;
    /* background: #FFFFFF; */
}
.rec2{
    position: absolute;
    height: 45.95604705810547px;
    width: 119.96490478515625px;
    left: 862.9404907226562px;
    top: 42.593414306640625px;
    border-radius: 10px;
    background: #7E81D1;
}
.SignUP{
    position: absolute;
    height: 43.71428680419922px;
    width: 106.8594970703125px;
    left: 10px;
    top: 0;
    border-radius: 0px;
    font-family: Poppins;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    text-align: left;
    /* background: #FFFFFF; */
}

<div id="mynavbar" class="navbar">
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <div class="logo">
              <img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
            </div>
            <a href="home"><span class="HOME">HOME</span></a>
            <a href="Artist"><span class="ARTIST">ARTIST</span></a>
            <a href="About_us"><span class="ABOUTUS">ABOUT US</span></a>
            <div class="search-bar">
              <form action="{% url 'results' %}" method="post" name="searched">
                {% csrf_token %}
                <input type="text" id="search-area" placeholder="Search Artist">
                <div class="search-icon">
                  <a href="results"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-search" viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                  </svg></a>
                </div>
              </form>
            </div>
              <div class="rec">
                <a href="Accounts/login"><span class="SignIn">SignIN</span></a>
              </div>
              <div class="rec2">
                <a href="Accounts/register"><span class="SignUP">SignUp</span></a>
              </div>
        </div>

views.py

def results(request):
    if request.method == "POST":
        searched = request.POST['searched']
        return render(request, 'Results.html', {'searched': searched})
    else:
        return render(request, 'Results.html', {})

url.py

 path('results', views.results, name='results')

this is my results

          function openNav() {
            document.getElementById("mynavbar").style.display = "block";
          }
          function closeNav() {
            document.getElementById("mynavbar").style.display = "none";
          }

.navbar{
    position: absolute;
    height: 91px;
    width: 1094px;
    left: 141px;
    top: 38px;
    border-radius: 0px;
}
.closebtn{
    display: none;
}
.nav-menu{
    display: none;
}
.HOME{
    position: absolute;
    height: 34px;
    width: 93.95413208007812px;
    left: 195.8201904296875px;
    top: 43px;
    border-radius: 0px;
    font-family: Poppins;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    text-align: left;
}
.ARTIST{
    position: absolute;
    height: 34px;
    width: 101.97296142578125px;
    left: 316.601806640625px;
    top: 43px;
    border-radius: nullpx;
    font-family: Poppins;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    text-align: left;
}
.ABOUTUS{
    position: absolute;
    height: 34px;
    width: 136.93508911132812px;
    left: 458.3927917480469px;
    top: 43px;
    border-radius: 0px;
    font-family: Poppins;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    text-align: left;
}
.search-bar{
    position: absolute;
    height: 34px;
    width: 170.92608642578125px;
    left: 631.2612915039062px;
    top: 45px;
    border-radius: 45px;
    border: 3px solid #FFFFFF;
}
.search-icon{
    position: absolute;
    height: 19px;
    width: 24px;
    left: 137px;
    top: 4px;
    border-radius: 0px;
}
.bi-search{
    position: absolute;
    height: 19px;
    width: 24px;
    left: 0px;
    top: 0px;
    border-radius: 0px;
}
.logo img{
    position: absolute;
    height: 57.599998474121094px;
    width: 100px;
    left: 12px;
    top: 31px;
    border-radius: 0px;
}
.rec{
    position: absolute;
    height: 41px;
    width: 115.56927490234375px;
    left: 976.0270385742188px;
    top: 38px;
    border-radius: 10px;
    background: #6484B4;
}
.SignIn{
    position: absolute;
    height: 34px;
    width: 94.94293212890625px;
    left: 12px;
    top: 0px;
    border-radius: 0px;
    font-family: Poppins;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    text-align: left;
}
.rec2{
    position: absolute;
    height: 41px;
    width: 115.56939697265625px;
    left: 831.322509765625px;
    top: 38px;
    border-radius: 10px;
    background: #7E81D1;
}
.SignUP{
    position: absolute;
    height: 39px;
    width: 102.9442138671875px;
    left: 7px;
    top: 0px;
    border-radius: 0px;
    font-family: Poppins;
    font-size: 27px;
    font-style: normal;
    font-weight: 700;
    line-height: 41px;
    letter-spacing: 0em;
    text-align: left;
}
#search-area{
    position: absolute;
    left: 8px;
    top: -2px;
    background: #ffffff00;
    border: #ffffff00;
    border-radius: 45px;
    font-family: 'Poppins';
    font-size: 19px;
    font-weight: 700;   
}

<div id="mynavbar" class="navbar">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <div class="logo">
        <img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
      </div>
      <a href="home"><span class="HOME">HOME</span></a>
      <a href="Artist"><span class="ARTIST">ARTIST</span></a>
      <a href="About_us"><span class="ABOUTUS">ABOUT US</span></a>
      <div class="search-bar">
        <input type="text" id="search-area" placeholder="Search">
        <div class="search-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-search" viewBox="0 0 16 16">
            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
          </svg>
        </div>
      </div>
        <div class="rec">
          <a href="Accounts/login"><span class="SignIn">SignIN</span></a>
        </div>
        <div class="rec2">
          <a href="Accounts/register"><span class="SignUP">SignUp</span></a>
        </div>
  </div>
  <div class="results">
    {% if searched %}
        <h2>You have searched for {{searched}}</h2>
    {% else %}
        <h2>You forget to fill out the form</h2>
    {% endif %}
  </div>

Solution 1:^[1]

With the search query you are trying to get data based on your input. so instead of post, use a get request here & give your input field a name to access that in your view.

Template:

<form>
   <input type="text" id="search-area" placeholder="Search Artist" name="searched">
</form>

The default method of a form is GET, so you dont have to specify method="get"

View:

def results(request):
    if request.method == "GET":
        searched = request.GET.get('searched')
        return render(request, 'Results.html', {'searched': searched})
    else:
        return render(request, 'Results.html', {})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'My search bar backend config is not properly responding to my condition statement

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]