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

Problems to display the Form in the Template using CreateView

What happens is that I am using CreateView and I find it curious that the code works when I put {{form}}, it displays all the fields and saves in the database (everything works very well) but when I break down the values ​​one by one for example: {{form.plates}}, {{form.type}}, it does not send anything to the database and it stays on the same page. Why is that? I just need it broken down
clientes-add.html
<form enctype="multipart/form-data" method="post">
{% csrf_token %}
<div class="row mb-3">
<div class="col-md-3">
<div class="mb-3">
<label>Customer type</label>
<br>
<div class="form-check form-check-inline">
{{ form.tipo }}
</div>
</div>
</div>
</div>
<div class="row mb-3 only-corp hide-item">
<div class="col-md-12">
<div class="mb-3">
<label>Corporation name</label>
{{ form.corporacion }}
</div>
</div>
</div>
<button class="btn btn-primary mb-3" type="submit" value="Post">Save</button>
</form>

You also need to render {{form.fieldname.errors}} for each {{form.fieldname}}. The error will be telling you why the form is not valid, but you cannot see them!
You can test it if there is extra html you want to generate only if there are errors.
{% if form.fieldname.errors %} <br> {{form.fieldname.errors }} {% endif %}
Don't forget {{form.non_field_errors }}

how to save a select item in django

how to save a select item with a background color in a django of a display list of listed project items i was trying to use javascript queryselectors but it kept on selecting the frist project item with a green background indicating the project was taken, i wanted it done but clicking on a particular project id changing it background to green as indication that project has already been. am open to suggestions dont know what am doing wrong
{% if latest_question_list %}
{% for question in latest_question_list %}
<div class="container">
<div class="row example" id="posted-projects">
<div class="col-sm-2 text-center">
<img src="{% static 'img\profile.png' %}" width="60"/>
</div>
<div class="col-sm-2 text-center">
<br>
<span class="glyphicon glyphicon-pencil"></span> Edit
<br>
</div>
<div class="col-sm-2">
<br>
<button type="button" class="btn btn-default btn-sm btn-block"><span class="glyphicon glyphicon-trash"></span> Remove</button>
</div>
<div class="col-sm-2">
<br>
<button onclick="myFunction()" type="button" class="btn btn-default btn-sm btn-block"><span class="glyphicon glyphicon-briefcase"></span> Take Project</button>
</div>
<div class="col-sm-4">
<br>
<a class="btn btn-default btn-sm btn-block" href="{% url 'explore:detail' question.id %}">{{ question.question_text }}</a>
<br>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p>No project are available.</p>
{% endif %}

Strange block/extends interaction going on in Django

so in my home page I extend from 2 things, based on whether or not the user is signed in or not. Then, if they have TRIED to sign in, and failed, i want the inputs to be red:
{% extends extendVar %} #in this case, extendvar=notLoggedIn.html
{% block signIn %}
{% if failure %}
<div class="form-group has-error">
<input type="email" id="email" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group has-error">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
{% endif %}
{% endblock %}
notLoggedIn.html then includes from a header page:
<div class="container" style="">
{% include 'header.html' %}
</div>
And this has a block tag:
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-left">
<a class="" href="#">
<img alt="Brand" src="{% static 'images/Logo.png' %}" style="height:auto; max-width:470px; margin-top:-22px; margin-bottom:-30px; padding-right:10px;">
</a>
</ul>
<ul class="nav nav-pills pull-right">
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" action="{% url 'signIn' %}" method="POST">
{% csrf_token %}
{% block signIn %}
<div class="form-group">
<input type="email" id="email" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>
<button class="btn btn-primary btn" href="" role="button" style="">Sign in </button>
{% endblock %}
</form>
</div>
</ul>
</nav>
Project name</h3> -->
my only problem is that because i am including header in NotLoggedIn, and then extending that, it doesnt preserve the block tags, and so the signIn blocks are not working. If instead of doing include header, i merely hard-code it, the blocks work perfectly. Any ideas?

According to the django documentation, when you use "include", blocks in the included template are evaluated first, and then substituted in. So in your template, you can't override a block of the included template.
https://docs.djangoproject.com/es/1.9/ref/templates/builtins/#include
Instead of using a block, what if you pass variables down to the include block, to get it to render how you want? For example:
Your template:
{% include 'header.html' with failure=failure %}
header.html:
<div class="form-group {% if failure %}has-error{% endif %}">
<input type="email" id="email" name="email" placeholder="Email" class="form-control">
</div>
<div class="form-group {% if failure %}has-error{% endif %}">
<input type="password" name="password" placeholder="Password" class="form-control">
</div>