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
Related
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 %}
Problem : I want to do the whole thing with the Form_Setting class in the forms.py file. Here I have defined the 4 submit buttons. I then use the buttons in the settings.html. In the routes.py file I want to react when they are pressed. However, at the moment it is still so that I can react with form.validate_on_submit() only generally on the submit. How can I distinguish which of the submit buttons were pressed to then perform different actions?
routes.py
from page import app
from flask import render_template, redirect, url_for
from page.models import Settings
from page.forms import Form_Setting
from page import db
#app.route('/settings', methods=['GET','POST'] )
def Settings_Page():
form = Form_Setting()
if form.validate_on_submit():
save_email = Settings(email_adress=form.email_adress.data)
db.session.add(save_email)
db.session.commit()
return redirect(url_for('Settings_Page'))
return render_template('settings.html',form=form)
forms.py
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
class Form_Setting(FlaskForm):
email_adress = StringField(label='Email')
dooralarm_time = StringField(label='Türalarm')
minimum_temp = StringField(label='MinTemp')
maximum_temp = SubmitField(label='MaxTemp')
submit_email = SubmitField(label='Eingabe')
submit_door = SubmitField(label='Eingabe')
submit_temp_max = SubmitField(label='Eingabe')
submit_temp_min = SubmitField(label='Eingabe')
settings.html
{%extends 'base.html' %}
{% block ActivSettings%}
active
{% endblock %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/style.css')}}"/>
{% endblock %}
{% block title %}
Einstellungen
{% endblock %}
{% block content %}
<div>
<div class="container">
<h1 class="setting-page">Einstellungen</h1>
<!--Email Adresse-->
<div class="row ">
<div class="col-sm-12">
<div class="d-flex justify-content-start align-items-center" style="height: 8vh;">
<div class="col-sm-3 ">
<h3 class="setting-label">E-mail</h3>
</div>
<div class="col-sm-9">
<form method="POST" class="form-register flex-fill d-flex" >
<!--Schutz gegen CSRF-->
{{ form.hidden_tag() }}
{{ form.email_adress(class="form-control", placeholder="E-Mail") }}
{{ form.submit_email(class="btn btn-md btn-block btn-primary", style="background-color: #6941c6; border:none; color: #f9f5ff; margin-left: 1vw;" )}}
</form>
</div>
</div>
<hr class="divider">
</div>
</div>
<!--Türalarm Zeitintervall-->
<div class="row ">
<div class="col-sm-12">
<div class="d-flex justify-content-start align-items-center" style="height: 8vh;">
<div class="col-sm-3 ">
<h3 class="setting-label">Türalarm Zeitintervall</h3>
</div>
<div class="col-sm-9">
<form method="POST" class="form-register flex-fill d-flex" >
<!--Schutz gegen CSRF-->
{{ form.hidden_tag() }}
{{ form.dooralarm_time(class="form-control", placeholder="Zeitintervall") }}
{{ form.submit_door(class="btn btn-md btn-block btn-primary", style="background-color: #6941c6; border:none; color: #f9f5ff; margin-left: 1vw;" )}}
</form>
</div>
</div>
<hr class="divider">
</div>
</div>
<!--Temp. Schwellwert Minimal-->
<div class="row ">
<div class="col-sm-12">
<div class="d-flex justify-content-start align-items-center" style="height: 8vh;">
<div class="col-sm-3 ">
<h3 class="setting-label">Temp. Schwellwert Minimal</h3>
</div>
<div class="col-sm-9">
<form method="POST" class="form-register flex-fill d-flex" >
<!--Schutz gegen CSRF-->
{{ form.hidden_tag() }}
{{ form.dooralarm_time(class="form-control", placeholder="Temp. Minimal") }}
{{ form.submit_temp_max(class="btn btn-md btn-block btn-primary", style="background-color: #6941c6; border:none; color: #f9f5ff; margin-left: 1vw;" )}}
</form>
</div>
</div>
<hr class="divider">
</div>
</div>
<!--Temp. Schwellwert Maximal-->
<div class="row ">
<div class="col-sm-12">
<div class="d-flex justify-content-start align-items-center" style="height: 8vh;">
<div class="col-sm-3 ">
<h3 class="setting-label">Temp. Schwellwert Maximal</h3>
</div>
<div class="col-sm-9">
<form method="POST" class="form-register flex-fill d-flex" >
<!--Schutz gegen CSRF-->
{{ form.hidden_tag() }}
{{ form.dooralarm_time(class="form-control", placeholder="Temp. Maximal") }}
{{ form.submit_temp_min(class="btn btn-md btn-block btn-primary", style="background-color: #6941c6; border:none; color: #f9f5ff; margin-left: 1vw;" )}}
</form>
</div>
</div>
<hr class="divider">
</div>
</div>
</div>
</div>
{% endblock %}
Webseite
The result for the page
You can iterate through request.form using the variable name of the submit button.
from flask import request
if 'submit_email' in request.form:
# do something
elif 'submit_door' in request.form:
# do something
Be sure that the form will still validate properly form.validate_on_submit()
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 }}
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>
I have a end_date field on my news apps which is a facultative field.
When a author is editing one of his new and erase the end_date, I set in the model the end_date to None.
My problem is that the field then display the value 'None' on next edit instead of just being blank.
Here is my field :
models.py
end_date = models.DateTimeField(null=True, blank=True)
forms.py
end_date = forms.CharField(label='', required=False, widget=forms.DateTimeInput(attrs={'class': 'form-control', 'format': 'DD, d MM yy', 'placeholder': _('End date')}))
and the assignation in my view :
views.py
if news_form.cleaned_data['end_date'] == '' :
edited_new.end_date = None
edited_new.save()
EDIT :
here is my template :
news.html
<form action="#" method="post" role="form" id="news-form">{% csrf_token %}
{{ news_form.media }}
<div class="col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 col-md-6">
<h2 class="panel-title">{% trans "Add or edit news" %}</h2>
</div>
<div class="col-xs-12 col-md-6">
<div class="pull-right">
<span class="glyphicon glyphicon-floppy-remove"></span> {% trans "Cancel" %}
<button type="submit" class="btn btn-primary form-btn save"><span class="glyphicon glyphicon-floppy-saved"></span><span class="button-text"> {% trans "Save" %}</span></button>
</div>
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6">
{{ news_form.title }}
</div>
<div class="col-xs-4 col-md-2">
{% trans 'Tag' %}
</div>
<div class="col-xs-8 col-md-4">
{{ news_form.tag }}
</div>
</div>
<div class="row">
<div class="col-xs-12 no-label-field redactor-field">
{{ news_form.message }}
</div>
</div>
<div class="row">
<div class="col-xs-6 date-field no-label-field">
<div class="form-group">
<div class='input-group date datetimepicker'>
{{ news_form.start_date }}
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-xs-6 date-field no-label-field">
<div class="form-group">
<div class='input-group date datetimepicker'>
{{ news_form.end_date }}
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
{{ news_form.active }} {% trans 'Activate the news' %}
</div>
</div>
</div>
</div>
</div>
<span style="display:none;">{{ news_form.id }}</span>
</form>
You can use the filter default_if_none available since Django 1.3, it'll only work for values that are None.
{{ news_form.end_date|default_if_none:'' }}
Docs