registration.html and home.html page (among others) inherit from the same layout.html. Everything appears to be set up correctly; sidebar is showing to the right on all pages except where I'm using wtforms. This appears to not be the case for others.
home.html
register.html
layout.html
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
{% if title %}
<title> ANC - {{ title }} </title>
{% else %}
<title>All New Colors</title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-yellow fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/"><img src='static/img/anc-logo-nav.png'></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="/">Home</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="/login">Login</a>
<a class="nav-item nav-link" href="/register">Register</a>
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="container" style="text-align: center">
<img style = "padding-top: 3vh; padding-bottom: 8vh;" src = "static/img/website_logo_transparent_background.png">
</div>
<div class="row">
<div class="col-md-8">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Popular Tags</h3>
<p class='text-muted'>Find additional topics using the search bar.
<ul class="list-group">
<li class="list-group-item list-group-item-dark">Latest Posts</li>
<li class="list-group-item list-group-item-dark">Career</li>
<li class="list-group-item list-group-item-dark">Education</li>
<li class="list-group-item list-group-item-dark">Finance</li>
</ul>
</p>
</div>
</div>
</div>
</main>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
home.html
{% extends "layout.html" %}
{% block content %}
{% for post in posts %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="#">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
<p class="article-content">{{ post.content }}</p>
</div>
</article>
{% endfor %}
{% endblock content %}
register.html
{% extends "layout.html" %}
{% block content %}
<div class='content-section'>
<form method="POST" action="">
{{ form.hidden_tag() }}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Join Today</legend>
<div class="form-group">
{{ form.username.label(class="form-control-label") }}
{{ form.username(class="form-control form-control-lg") }}
</div>
<div class="form-group">
{{ form.email.label(class="form-control-label") }}
{{ form.email(class="form-control form-control-lg") }}
</div>
<div class="form-group">
{{ form.password.label(class="form-control-label") }}
{{ form.password(class="form-control form-control-lg") }}
</div>
<div class="form-group">
{{ form.confirm_password.label(class="form-control-label") }}
{{ form.confirm_password(class="form-control form-control-lg") }}
</div>
</fieldset>
<div class="form-group">
{{ form.submit(class="btn btn-outline-info") }}
</form>
</div>
<div class="border-top pt-3">
<small class="text-muted">
Already Have An Account? <a class="ml-2" href="{{ url_for('login') }}">Sign In</a>
</small>
</div>
{% endblock content %}
I'm guessing it has something to do with the bootstrap css but I'm not sure how to fix or override that.
You forgot closing div </div> before closing </form>
<div class="form-group">
{{ form.submit(class="btn btn-outline-info") }}
</div>
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}"> -->
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-yellow fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/"><img src='static/img/anc-logo-nav.png'></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="/">Home</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="/login">Login</a>
<a class="nav-item nav-link" href="/register">Register</a>
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="container" style="text-align: center">
<img style = "padding-top: 3vh; padding-bottom: 8vh;" src = "static/img/website_logo_transparent_background.png">
</div>
<div class="row">
<div class="col-md-8">
<div class='content-section'>
<form method="POST" action="">
{{ form.hidden_tag() }}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Join Today</legend>
<div class="form-group">
{{ form.username.label(class="form-control-label") }} {{ form.username(class="form-control form-control-lg") }}
</div>
<div class="form-group">
{{ form.email.label(class="form-control-label") }} {{ form.email(class="form-control form-control-lg") }}
</div>
<div class="form-group">
{{ form.password.label(class="form-control-label") }} {{ form.password(class="form-control form-control-lg") }}
</div>
<div class="form-group">
{{ form.confirm_password.label(class="form-control-label") }} {{ form.confirm_password(class="form-control form-control-lg") }}
</div>
</fieldset>
<div class="form-group">
{{ form.submit(class="btn btn-outline-info") }} \
</div>
</form>
</div>
<div class="border-top pt-3">
<small class="text-muted">
Already Have An Account? <a class="ml-2" href="{{ url_for('login') }}">Sign In</a>
</small>
</div>
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Popular Tags</h3>
<p class='text-muted'>Find additional topics using the search bar.
<ul class="list-group">
<li class="list-group-item list-group-item-dark">Latest Posts</li>
<li class="list-group-item list-group-item-dark">Career</li>
<li class="list-group-item list-group-item-dark">Education</li>
<li class="list-group-item list-group-item-dark">Finance</li>
</ul>
</p>
</div>
</div>
</div>
</main>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I have deployed Django in my site subdomain apps.example.com through cPanel and the home page of my Django app apps.example.com/adsense-eligibility-checker is working but when I fill the form and click on the SUBMIT Button it redirects to 404 error page instead of running the second function scanned(requests) in mainApp/views.py. But it works in local host.
This is inside mainApp/views.py directory:
def home(request):
return render(request, 'home.html')
def scanned(request):
email = request.POST['email']
site = request.POST['site']
rating = request.POST['stars']
source = request.POST.getlist('source')
......
return render(request, "result.html", {'rMsg':rMsg,'result0':result0, 'result1':result1,'site': site,'show_site':show_site, 'vips':m1, 'domain':domain, 'site_age':site_age, 'sent': sent})
Inside MainApp/urls.py:
from django.urls import path
from.import views
urlpatterns=[
path('', views.home, name='home'),
path('scanned/', views.scanned, name='scanned')
]
Inside home.html:
{% extends 'main.html' %}
{% load static %}
{% block content %}
{% csrf_token %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static 'style.css' %}">
<form method='POST' action="/scanned/" class='FormBody'>
{% csrf_token %}
<div id='tab'>
<h2>Adsense Eligibility Checker</h2>
<fieldset class='siteAndEmail'>
<legend>Site & Email</legend>
<div class='form-wrapper'>
<div class='full-input'>
<label for="site">Your Site URL</label>
<input type="domain" name='site' class='input' placeholder="https://yoursite.com">
</div>
<div class='full-input'>
<label for="email">Your Email</label>
<input type="text" name='email' class='input' placeholder="youremail#gmail.com">
</div>
</div>
</fieldset>
<fieldset class='siteAndEmail reached'>
<legend>How did you reached us?</legend>
<label class='c1'>
<input type="checkbox" name='source' value='Facebook' />
<i id='icon' class="fa fa-facebook"
style='background:linear-gradient(white,lightblue); color:dodgerblue;'></i>
Via Facebook
</label>
<label class='c1'>
<input type="checkbox" name='source' value='Google Search' />
<i id='icon' class="fa fa-google"
style='background:linear-gradient(160deg,yellow, dodgerblue,rgb(255, 0, 119), rgb(157, 255, 0)); color:white;'></i>
Via Google Search
</label>
<label class='c1'>
<input type="checkbox" name='source' value='Quora' />
<i id='icon' class="fa fa-quora"
style='background:linear-gradient(rgb(236, 0, 0),rgb(158, 0, 0)); color:white;'></i>
Via Quora
</label>
<div style='display:inline-block;'>
OTHERS
<input type="text" name='source'
style="background:rgba(255, 255, 255, 0.048);font-family:'Courier New', Courier, monospace; border:0px; border-bottom:1px solid rgba(0, 0, 0, 0.568);line-height:1.5em; padding-left:3px;"
placeholder="others" />
</div>
</fieldset>
</div>
<fieldset class='siteAndEmail'>
<legend>Rate Our Service</legend>
<div class='rating'>
<label>
<input type="radio" name="stars" value="1" />
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="2" />
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="3" checked />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="4" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="5" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
</div>
</fieldset><br>
<button class='butn'> S C A N </button>
</form>
{% endblock %}
Inside result.html:
{% extends 'main.html' %}
{% load static %}
{% block content %}
{% load static %}
{% csrf_token %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static 'style2.css' %}">
<div class='borders'>
<h2>R E S U L T Of Scanning Via Adsense Eligibility Checker</h2>
<div id='result'>
<ul style='text-align:left;'>
<li type='disc'>
{{result1}}
<script>
if ('{{rMsg}}'== ''){
document.write('<br>');
console.log('rMsg Level 1');
}
else {
document.getElementById('rmsg').innerHTML=('{{rMsg}}');
console.log('rMsg Level 2');
}
</script>
{{result0}}
<a id='rmsg'></a><br><a alt='What are the pages required for Adsense Approval' title='Pages Required For Adsense Approval' style='display:inline-block; text-decoration:none; color:rgb(196, 255, 87);' href='https://blog.example.com/check-website-eligibility-for-google-adsense/#What_are_the_pages_required_for_Adsense_approval'>
Pages Required For Adsense Approval
</a>
</li>
<li type='disc'>{{domain}}</li>
<li type='disc'>{{site_age}}</li>
<p style='text-align:center;'><i id='icon' class="fa fa-globe" style='background:linear-gradient(rgba(0, 250, 146, 0.596),rgba(0, 140, 255, 0.637)); color:rgb(255, 255, 255);'></i>
<a href='{{site}}' style='display:inline-block; text-decoration:none; color:rgb(0, 255, 179);'>{{show_site}}</a> is awesome.
</p>
</ul>
</div>
</div>
<p style='font-size:medium;font-family:serif;'>{{sent}}</p>
<br>
<a style='font-family:Consolas;font-size:larger;font-weight:bolder;display:inline-block; text-decoration:none; color:rgb(196, 255, 87);' href='https://blog.example.com/check-website-eligibility-for-google-adsense/#What_are_the_minimum_requirements_for_Adsense_Approval' title='Minimum requirements for Adsense Approval'>Min-Requirements for Adsense Approval</a>
{% endblock %}
type attribute also need be added, and action can be left empty if it has to go the current url
<button class='butn' type='submit'> S C A N </button>
Change this views.py:
def scanned(request):
email = request.POST['email']
site = request.POST['site']
rating = request.POST['stars']
source = request.POST.getlist('source')
......
# Inside function
return render(request, "result.html", {'rMsg':rMsg,'result0':result0, 'result1':result1,'site': site,'show_site':show_site, 'vips':m1, 'domain':domain, 'site_age':site_age, 'sent': sent})
Also, change your action by name. Like:
<form method='POST' action="{% url 'scanned' %}" class='FormBody'>
You have got issues with form url action make that correct and change button type to submit and redirect your url rather than rendering
return redirect('html_page')
The last character 'r' of slug adsense-eligibility-checker gets vanished into adsense-eligibility-checke\scanned and finally, I added action='adsense-eligibility-checker\scanned' which worked perfectly.
I have one landing page. I want to separate them and divide them in different pages so that whenever I make changes in it, I don't have to search a long index.html page. How to do this? I made changes but it is not working because in <div> it has id which I don't know how to reach?
views.py
def contact(request):
if request.method == 'POST':
print(request)
first = request.POST.get('first', '')
last = request.POST.get('last', '')
email = request.POST.get('email', '')
textarea = request.POST.get('textarea', '')
print(first, last, email, textarea)
return render(request, 'home/contact.html')
index.html
<div class="row">
<div class="col-lg-12 mb-5">
<form action="" method="post">
{% csrf_token %}
<div class="form-group row">
<div class="col-md-6">
<input type="text" class="form-control" name="last" placeholder="Full name">
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<input type="text" class="form-control" name="email" placeholder="Email address">
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<textarea name="textarea" id="" class="form-control" placeholder="Write your message." cols="30" rows="10"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-md-6 mr-auto">
<input type="submit" class="btn btn-block btn-primary text-white py-2 px-5" value="Send Message">
</div>
</div>
</form>
</div>
</div>
Here is solution
<a href="{%url 'contact'%}" > Contact </a>
First of all you have to write that section from index.html to individual html file
Example:
index.html
<html>
<head>
...title...
</head>
<body>
<div>
<div>
...section 1...
</div>
<div>
...section 2...
</div>
</div>
</body>
</html>
Now, split those section into individual html file as...
section1.html
<div>
...section 1...
</div>
section2.html
<div>
...section 2...
</div>
Now, remove your section 1 and section 2 from index.html and at same place include this section1.html and section2.html as below...
index.html
<html>
<head>
...title...
</head>
<body>
<div>
{% include "section1.html" %}
{% include "section2.html" %}
</div>
</body>
</html>
I've created a django form:
#forms.py
from django import forms
class NameForm(forms.Form):
subject = forms.CharField(max_length=100)
message = forms.CharField(widget=forms.Textarea)
sender = forms.EmailField()
cc_myself = forms.BooleanField(required=False)
and in view file:
#views.py
def get_form(request):
print(request.POST)
form = NameForm(request.POST or None)
if form.is_valid():
print(form.cleaned_data)
return render(request, "name.html", {"title": "Contact us"})
I've imported to a html file inside templates folder:
#templates/name.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/your-name/" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Submit">
</form>
</body>
</html>
However, it doesn't show up any thing just a submit button. I have no idea what is the issue. I'll be so grateful for a solution around this issue.
Update: If I create a new html file, the form is shown there. However, if I use it in my main html including boostarp, it is not showing up. Here is the full code of my html:
{% extends 'base.html' %}
{% block content %}
<!-- Team -->
{% for card in cards %}
<!-- Team member -->
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
<div class="mainflip">
<div class="frontside">
<div class="card">
<div class="card-body text-center">
<p><img class=" img-fluid"
src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png"
alt="card image"></p>
<h4 class="card-title">{{ card.name }}</h4>
<p class="card-text">{{ card.description }}</p>
<i class="fa fa-plus"></i>
</div>
</div>
</div>
<div class="backside">
<div class="card">
<div class="card-body text-center mt-4">
<h4 class="card-title">{{ card.name }}</h4>
<!--<p class="card-text"> {{ card.back_description }}-->
<form action="/your-name/" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Submit">
</form>
<!--</p> -->
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-skype"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-google"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ./Team member -->
{% endfor %}
{% endblock %}
It made me crazy for three days. I look forward for a solution. Thanks
Update2:
#base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="{% static 'css/stylesheet.css' %}" rel="stylesheet" type="text/css">
<!------ Include the above in your HEAD tag ---------->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<section id="team" class="pb-5">
<div class="container">
<h5 class="section-title h1">OUR TEAM</h5>
<div class="row">
{% block content %}
{% endblock %}
</div>
</div>
</section>
</body>
</html>
#card.html
{% extends 'base.html' %}
{% block content %}
<!-- Team -->
{% for card in cards %}
<!-- Team member -->
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
<div class="mainflip">
<div class="frontside">
<div class="card">
<div class="card-body text-center">
<p><img class=" img-fluid"
src="https://sunlimetech.com/portfolio/boot4menu/assets/imgs/team/img_01.png"
alt="card image"></p>
<h4 class="card-title">{{ card.name }}</h4>
<p class="card-text">{{ card.description }}</p>
<i class="fa fa-plus"></i>
</div>
</div>
</div>
<div class="backside">
<div class="card">
<div class="card-body text-center mt-4">
<h4 class="card-title">{{ card.name }}</h4>
<!--<p class="card-text"> {{ card.back_description }}-->
<form action="/your-name/" method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Submit">
</form>
<!--</p> -->
<ul class="list-inline">
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-skype"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-icon text-xs-center" target="_blank" href="#">
<i class="fa fa-google"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ./Team member -->
{% endfor %}
{% endblock %}
change this line on your views.py file:
return render(request, "name.html", {"title": "Contact us"})
into this one:
return render(request, "name.html", {'form': form })
I have this dropdown menu from Bootstrap. I have different categories that a user could choose from. When they click the 'Department' button and select a department, I would like the 'Department' button to change to whatever the user selected. I have attached the HTML for the dropdown.
<form class="navbar-form navbar-left" action="{{ url_for('my_view.product_search') }}" method="GET">
<div class="form-group">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Department <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Laptops</li>
<li>Cameras</li>
<li>Gaming</li>
<li>Networking</li>
<li>Tools</li>
<li>Headphones</li>
<li>Speakers</li>
<li>Miscellaneous</li>
<li>Blu-Ray</li>
</ul>
</div><!-- /Dropdown Button -->
<input type="text" name="name" class="form-control" placeholder="Search Products...">
</div><!-- /input-group -->
<button type="submit" class="btn btn-default">Submit</button>
</div><!-- /.col-lg-6 -->
</div>
</form><!-- END SEARCH FUNCTION -->
EDIT
Here is a link to what the dropdown looks like
You need to use javascript. I added a click event to the links within the <li> tag, and a <span> within your button to allow for simple jQuery selection. The URLs here are relative to my local testing environment.
This is a working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StackOverflow Testing...</title>
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
</head>
<body>
<form action method="post">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="button_text">Department</span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="select_option" href="#">Laptops</a></li>
<li><a class="select_option" href="#">Cameras</a></li>
<li><a class="select_option" href="#">Gaming</a></li>
<li><a class="select_option" href="#">Networking</a></li>
<li><a class="select_option" href="#">Tools</a></li>
<li><a class="select_option" href="#">Headphones</a></li>
<li><a class="select_option" href="#">Speakers</a></li>
<li><a class="select_option" href="#">Miscellaneous</a></li>
<li><a class="select_option" href="#">Blu-Ray</a></li>
</ul>
</div><!-- /Dropdown Button -->
<input type="text" name="name" class="form-control" placeholder="Search Products...">
</div><!-- /input-group -->
<button type="submit" class="btn btn-default">Submit</button>
</div><!-- /.col-lg-6 -->
</div>
</form>
<script charset="utf-8" type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script charset="utf-8" type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script charset="utf-8" type="text/javascript">
$('a.select_option').bind('click', function() {
var selected = $(this).text();
$('#button_text').text(selected);
});
</script>
</body>
</html>