We Keep Coding

How to associate form with a `bootstrap_field` outside that form?

Given this field {% bootstrap_field form.photo %} which is a forms.ImageField and the form after, I need to associate the field with the form in a way that when the form is submitted, I get the value in form.photo.
<div class="row container h-100">
<div class="col-xl-4">
<div class="card mb-4 mb-xl-0">
<div class="card-body text-center">
<img style="max-width: 50%" alt="Avatar" class="img-account-profile rounded-circle mb-2"
src={{ request.user.profile.photo.url }}>
{% bootstrap_field form.photo %}
</div>
</div>
</div>
<div class="col h-100">
<div class="card shadow-lg">
<div class="card-body p-5">
<form enctype="multipart/form-data" method="post">
{% csrf_token %}
<div class="row">
<span class="col">
{% bootstrap_field form.first_name %}
</span>
<span class="col">
{% bootstrap_field form.last_name %}
</span>
<button class="btn btn-success col">Update</button>
</div>
</form>
</div>
</div>
</div>
</div>
Currently if a photo is uploaded, it won't show up in the form response because it's not included within <form></form>. I need it to be outside the form because the locations of the form fields and the photo are different.
One way to do so is to wrap both cards inside the form tags. Is this the best way to do it or is there a simpler way like specifying {% bootstrap_field my_field form=my_form %}

How to connect 2 forms in HTML and Django?

I am creating a web page and i'm wondering if i could make sure that the data on the left is filled before pressing the blue button. On the left you can see a form to pay by entering your address, city etc. but on the right you can see another form with stripe implemented to pay with credit card. I don't know how to get the data from the left and save it in the database so I can create a receipt after successful payment. Here is the code down below.
<div class="container-2">
<div class="gray-hover">
<form method="POST">
<div class="item" id="payment">
<div class="row">
<h4>Možnost nakupa 1: Plačilo po povzetju <small><i>(Za plačevanje s kartico je treba izbrati samo
količino in vrsto izdelka!)</i></small></h4>
{% csrf_token %}
{% if form %}
<div class="input-group">
<div style="color: red;">{{ form.name.errors }}</div>
{{ form.name }}
</div>
<div class="input-group">
<div style="color: red;">{{ form.last_name.errors }}</div>
{{ form.last_name }}
</div>
<div class="input-group">
<div style="color: red;">{{ form.street_name.errors }}</div>
{{ form.street_name }}
</div>
<div class="input-group">
<div style="color: red;">{{ form.city_name.errors }}</div>
{{ form.city_name }}
</div>
<div class="input-group">
<div style="color: red;">{{ form.email.errors }}</div>
{{ form.email }}
</div>
<div class="input-group">
<div style="color: red;">{{ form.number.errors }}</div>
{{ form.number }}
</div>
{% endif %}
</div>
</div>
<div class="item" id="payment2">
<div class="row">
<div class="input-group">
{{ form.num_elements.errors }}
{{ form.num_elements }}
</div>
<div class="input-group" id="check_div">
<div
style="display: flex;width:100%;justify-content: space-between;align-items: center;font-size:medium;flex-wrap: wrap;">
<div style="display: flex;justify-content: space-between;margin:3px;">
{{ form.select_type.errors }}
{{ form.select_type.label_tag }}
{{ form.select_type }}
</div>
<div style="display: flex;justify-content: space-between;margin:3px;">
{{ form.select_type2.errors }}
{{ form.select_type2.label_tag }}
{{ form.select_type2 }}
</div>
</div>
</div>
<div class="input-group">
{{ form.warning_el.errors }}
{{ form.warning_el }}
</div>
<div style="display: flex;justify-content: space-between;margin: 0.5rem;">
<button class="button" type="submit" id="button"> Naroči <small>(povzetje)</small></button>
<a class="button" id="stripe-button">Plačaj s kartico!</a>
</div>
</div>
</div>
</form>
</div>
<div class="gray-hover">
<div class="item" id="payment3" style="width:100%;">
<h4>Možnost nakupa 2: Plačilo s kartico <small><i>(Za plačevanje s kartico je treba izbrati samo
količino in vrsto izdelka!)</i></small></h4>
<div class="row" style="display: flex; justify-content: center;">
<form id="payment-form" data-locale="si" style="width:100%;">
<div id="payment-element">
<!--Stripe.js injects the Payment Element-->
</div>
<button id="submit" class="button1">
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Plačaj</span>
</button>
<div id="payment-message" class="hidden"></div>
</form>
</div>
</div>
</div>
</div>
AND HERE IS THE SCREENSHOT OF THAT 'CONTAINER-2'

Firstly make sure all your inputs are under one form and one view.
Use required=True in your Django form in order to make sure every input is entered.
If you are using Django forms, for example
from django import forms
class FooForm(forms.Form):
email = forms.EmailField(max_length=100,required=True,
widget=forms.TextInput(
attrs={ 'required': 'true' }),
)
In your view use the form is_valid method
form = FooForm(request.POST)
if form.is_valid():
# Complete Your Business Logic
...
return redirect("redirect_view")
# Else Return With Error Message
Use the form to save your data. If using Django form is not an option, you have to use javascript to disable the button until all inputs are not filled up

could not parse the remainder: '[0].title' from 'i[0].title'

I am trying to render the data from the database one by one by it does not work.
index.html
{% for i in edus %}
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">{{i[0].title}}
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<p>{{i[0].descripiton}} </p>
</div>
</div>
</div>
</div>
</div>
{% endfor %}

If you want to render specific index, you should change:
{{i[0].title}} into {{ i.0.title }}
{{i[0].descripiton }} into {{ i.0.description }}

request.GET in Django for Search is not working when entering only one search parameters

This is my Search function:
When I use this than I cannot search by only placing for example Keywords only or City only or any other parameters that I have used here.
It comes with no Listing Available.
But if I remove any search parameters any only work with one parameter like:
if I remove all others except #Keywords than my search works out.
# search function using request.GET
def search(request):
# for making search option dynamic as per search of user
queryset_list = Listing.objects.order_by('-list_date')
#Keywords
if 'keywords' in request.GET:
keywords = request.GET['keywords']
if 'keywords':
queryset_list = queryset_list.filter(description__icontains=keywords)
#City
if 'city' in request.GET:
city = request.GET['city']
if 'city':
queryset_list = queryset_list.filter(city__iexact=city)
# Bedrooms
if 'bedrooms' in request.GET:
bedrooms = request.GET['bedrooms']
if 'bedrooms':
queryset_list = queryset_list.filter(bedrooms__lte=bedrooms)
# Price
if 'price' in request.GET:
price = request.GET['price']
if 'price':
queryset_list = queryset_list.filter(price__lte=price)
context = {
'state_choices': state_choices,
'bedroom_choices': bedroom_choices,
'price_choices': price_choices,
'listings': queryset_list,
'values': request.GET
}
return render(request, 'listings/search.html', context)
Here is my Template file..... for the Search..
{%extends 'base.html'%}
<!---Import Humanaize---->
{%load humanize %} {% block title %} | Search Results {%endblock%}
<!---- Start Block Content-->
{%block content%}
<section id="showcase-inner" class="showcase-search text-white py-5">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<form action="{%url 'search' %}">
<!-- Form Row 1 -->
<div class="form-row">
<div class="col-md-4 mb-3">
<label class="sr-only">Keywords</label>
<input type="text" name="keywords" class="form-control" placeholder="Keyword (Pool, Garage, etc)" value="{{values.keywords}}">
</div>
<div class="col-md-4 mb-3">
<label class="sr-only">City</label>
<input type="text" name="city" class="form-control" placeholder="City" value="{{values.city}}">
</div>
<div class="col-md-4 mb-3">
<label class="sr-only">State</label>
<select name="state" class="form-control">
<option selected="true" disabled="disabled">State (All)</option>
<!--loop through the key and value pairs-->
{%for key, value in state_choices.items %}
<option value="{{ key }}"
{% if key == values.state %}
selected
{%endif%}
>
{{ value }}</option>
{%endfor%}
</select>
</div>
</div>
<!-- Form Row 2 -->
<div class="form-row">
<div class="col-md-6 mb-3">
<label class="sr-only">Bedrooms</label>
<select name="bedrooms" class="form-control">
<option selected="true" disabled="disabled">Bedrooms (Any)</option>
<!--loop through the key and value pairs-->
{%for key, value in bedroom_choices.items %}
<option value="{{ key }}"
{% if key == values.bedrooms %}
selected
{%endif%}
>{{ value }}</option>
{%endfor%}
</select>
</div>
<div class="col-md-6 mb-3">
<select name="price" class="form-control">
<option selected="true" disabled="disabled">Max Price (All)</option>
<!--loop through the key and value pairs-->
{%for key, value in price_choices.items %}
<option value="{{ key }}"
{% if key == values.price %}
selected
{%endif%}
>
{{ value }}</option>
{%endfor%}
</select>
</div>
</div>
<button class="btn btn-secondary btn-block mt-4" type="submit">Submit form</button>
</form>
</div>
</div>
</div>
</section>
<!-- Breadcrumb -->
<section id="bc" class="mt-3">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="{%url 'index'%}">
<i class="fas fa-home"></i> Home</a>
</li>
<li class="breadcrumb-item">
Browse Listings
</li>
<li class="breadcrumb-item active"> Search Results</li>
</ol>
</nav>
</div>
</section>
<!-- Listings -->
<section id="listings" class="py-4">
<div class="container">
<div class="row">
{%if listings %} {% for listing in listings %}
<!-- Listing 1 -->
<div class="col-md-6 col-lg-4 mb-4">
<div class="card listing-preview">
<img class="card-img-top" src="{{ listing.photo_main.url }}" alt="">
<div class="card-img-overlay">
<h2>
<span class="badge badge-secondary text-white">${{listing.price | intcomma}}</span>
</h2>
</div>
<div class="card-body">
<div class="listing-heading text-center">
<h4 class="text-primary">{{listing.title}}</h4>
<p>
<i class="fas fa-map-marker text-secondary"></i> {{listing.city}} {{listing.state}}, {{listing.zipcode}}</p>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-th-large"></i> Sqft: {{listing.sqft}}</div>
<div class="col-6">
<i class="fas fa-car"></i> Garage: {{listing.garage}}</div>
</div>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-bed"></i> Bedrooms: {{listing.bedrooms}}</div>
<div class="col-6">
<i class="fas fa-bath"></i> Bathrooms: {{listing.bathrooms}}</div>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-12">
<i class="fas fa-user"></i> {{listing.realtor}}</div>
</div>
<div class="row text-secondary pb-2">
<div class="col-6">
<i class="fas fa-clock"></i> {{listing.list_date | timesince}}</div>
</div>
<hr>
More Info
</div>
</div>
</div>
{%endfor%}
<!----if above is not true------>
{%else%}
<div class="col-md-12">
<p>
No Listings Available
</p>
</div>
<!------end of the if statement ------>
{%endif%}
</div>
</div>
</section>
{%endblock%}

From what I see there is a small error in your view. A statement like
if 'keywords' in request.GET:
will not check whether 'keywords' is empty. I will always return True as long as there is a field called 'keywords' in your form.
Then your checks like
if 'keywords':
will always return True as you are not checking the variable but a string. What you probably mean is
if keywords:
to check if keywords contains something.
So what is currently happening is that - as all your checks are returning True - your are filtering your queryset using a lot of empty strings, and this will return an empty queryset.
So remove the '' from your checks like if 'keywords': and the other similar if statements.
If you want you can also remove the if 'keywords' in request.GET: and similar as they always return True.

how to for loop the bootstrap grid

I'm trying to make it like the following: https://getbootstrap.com/docs/4.3/examples/pricing/
it shows the screen divided into three section
so it should be like this I think...
<div class="row mb-2">
<div class="col-4 bg-danger">
.col-4
</div>
<div class="col-4 bg-warning">
.col-4
</div>
<div class="col-4 bg-success">
.col-4
</div>
</div>
But the problem is I am using django jinja template and for loop. so it groups the whole content.
This is my code but it won't do what's like in the link
<div class="row">
<div class="col-6 col-md-4">
<div class="card">
{% for all_episode in episode %}
<img class="card-img-top" src='{{all_episode.image.url}}'>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">{{ all_episode.season }}</span></small>
</div>
{% endfor %}
</div>
</div>