Have form.
class AddLogo(forms.Form):
title = forms.CharField(max_length=100)
date = forms.TimeField()
image = forms.ImageField()
And have standard Django preview form.
from django.contrib.formtools.preview import FormPreview
from django.http import HttpResponseRedirect
from company.models import Company
class add_logo_preview(FormPreview):
form_template = 'add_logo_preview.html'
def done(self, request, cleaned_data):
return HttpResponseRedirect('/company/hey/')
In template
{% extends "base.html" %}
{% block block_js %}
{% endblock block_js %}
{% block content %}
<h1>Preview your submission</h1>
{% with form as job %}
<div class="job_block">
<div class="job_content">
<div class="job_title">
<h1>{{ job.title.data }}</h1>
<span class="date">{{ job.date.date.data }}</span>
</div>
<div class="job_company">
<div class="company_logo">
{{ job.image.url }}
</div>
<div class="company_description">
<div class="name">{{ job.company_name.data }}</div>
<div class="location">Главный офис: {{ job.company_location.data }}</div>
<div class="website">{{ job.company_url.data }}</div>
</div>
</div>
<article>
{{ job.description.data|safe }}
</article>
</div>
<aside>
<h4>Поделиться вакансией</h4>
</aside>
</div>
<div class="job_feedback">
<h3>Откликнутся на вакансию</h3>
<p>{{ job.apply_terms.data|safe }}</p>
</div>
{% endwith %}
<p>Security hash: {{ hash_value }}</p>
<form action="" method="post">{% csrf_token %}
{% for field in form %}{{ field.as_hidden }}
{% endfor %}
<input type="hidden" name="{{ stage_field }}" value="2" />
<input type="hidden" name="{{ hash_field }}" value="{{ hash_value }}" />
<p><input type="submit" value="Submit" /></p>
</form>
<h1>Or edit it again</h1>
<h1>Шаг первый: создайте свое объявление</h1>
<form action="/job/preview/" method="POST" class="form">{% csrf_token %}
<h3>Опишите вакансию</h3>
<fieldset>
<div class="label_box">
<label for="">Назавние вакансии</label>
</div>
<div class="fields_box">
{{ form.title }}
</div>
</fieldset>
<fieldset>
<div class="label_box">
<label for="">Категория</label>
</div>
<div class="fields_box">
{% for cat in form.category %}
{% if cat.choice_value %}
{{ cat }}
{% endif %}
{% endfor %}
</div>
</fieldset>
<fieldset>
<div class="label_box">
<label for="">Головной офис</label>
</div>
<div class="fields_box">
{{ form.company_location }}
</div>
</fieldset>
<fieldset class="one_col">
<div class="label_box">
<label for="">
Описание вакансии
</label>
</div>
<div class="fields_box">
{{ form.description }}
</div>
</fieldset>
<fieldset>
<div class="label_box">
<label for="">
Apply this job.
</label>
</div>
<div class="fields_box">
{{ form.apply_terms }}
</div>
</fieldset>
<h3>О компании</h3>
<fieldset>
<div class="label_box">
<label for="">Название</label>
</div>
<div class="fields_box">
{{ form.company_name }}
</div>
</fieldset>
<fieldset>
<div class="label_box">
<label for="">Логотип</label>
</div>
<div class="fields_box">
{{ form.image }}
</div>
</fieldset>
<fieldset>
<div class="label_box">
<label for="">URL</label>
</div>
<div class="fields_box">
{{ form.company_url }}
</div>
</fieldset>
<fieldset>
<div class="label_box">
<label for="">Email</label>
</div>
<div class="fields_box">
{{ form.company_email }}
</div>
</fieldset>
<fieldset>
<div class="label_box">
<span>
Подсветить это объявление?
</span>
<label for="">{{ form.highlight }} Подсветить?</label>
</div>
</fieldset>
<input type="submit" value="Просмотреть">
</form>
{% endblock %}
I try: {{ form.image.url }} but does not work. I understand one: Django do not upload file, but how i cane change this? How i can make preview image in django FormPreview?
Convert your image to a base64 string, add a field to your form for that base 64 string. In the preview template, display the base64 string. And when finally saving the image, you will need to create a file, write the content of the base 64 string to it, and then save that file to your model.
Related
The following is my current code:
{% for comment in commentlist %} <!-- Comment section -->
<h5>
{{ comment[0] }}
</h5>
<h6>Created {{ comment[1].strftime('%d/%m/%Y at %I:%M%p') }} By: {{ comment[2] }}</h6>
{% if session.username == comment[2] %}
<form action="{{ url_for('detail', slug=entry.slug) }}" class="form-horizontal" method="post">
<input class="form-control" name="commentid" type="hidden">
<div class="form-group">
<div class="col-sm-offset-0 col-sm-1">
<button class="btn btn-default1" type="submit">Delete!</button>
</div>
</div>
</form>
{% endif %}
<br></br>
{% endfor %}
When the button it pressed it should return the value of
{{ comment[3] }}
This value I should then be able to fetch from Flask in the form of
request.form.get('commentid')
Any ideas of how this could be done would be much appreciated!
<input class="form-control" name="commentid" type="hidden" value="{{ comment[3] }}">
I'm currently coding a website using Django and Bootstrap.
I created the templates and models first, and now, I'm implementing the controllers. All is not implemented yet, but I needed some help on this. I was wondering how to render a Django authentication form with the Boostrap grid system. I'm using Boostrap 4 and Django 2.0.4. My older form was like this :
<div class="jumbotron">
<form class="form-horizontal" method="post" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
<div class="col-lg-4 offset-lg-4">
<label class="control-label" for="usernameInput">{{ form.username.label_tag }}</label>
<input id="usernameInput" type="text" name="{{ form.field.html_name }}" value="{{ form.username }}" class="form-control"
placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-lg-4 offset-lg-4">
<label class="control-label" for="passwordInput">{{ form.password.label_tag }}</label>
<input id="passwordInput" type="password" name="{{ form.field.html_name }}" value="{{ form.field.value }}" class="form-control"
placeholder="Password">
</div>
</div>
<div class="container" id="btn_login">
<button type="submit" class="btn btn-primary btn-md" value="login" role="button">Log in</button>
<input type="hidden" name="next" value="{{ next }}"/>
</div>
</form>
<span class="container" id="forgotten_password">
Forgot your password ?
</span>
</div>
And here is the new one :
<div class="jumbotron">
{% load widget_tweaks %}
<form class="form-horizontal" method="post" action="{% url 'login' %}">
{% csrf_token %}
{% for hidden_field in form.hidden_fields %}
{{ hidden_field }}
{% endfor %}
{% if form.non_field_errors %}
<div class="alert alert-danger" role="alert">
{% for error in form.non_field_errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
{% for field in form.visible_fields %}
<div class="form-group">
{{ field.label_tag }}
{% if form.is_bound %}
{% if field.errors %}
{% render_field field class="form-control" %}
{% for error in field.errors %}
<div class="invalid-feedback">
{{ error }}
</div>
{% endfor %}
{% else %}
{% render_field field class="form-control" %}
{% endif %}
{% else %}
{% render_field field class="form-control" %}
{% endif %}
{% if field.help_text %}
<small class="form-text text-muted">{{ field.help_text }}</small>
{% endif %}
</div>
{% endfor %}
<div class="container" id="btn_login">
<button type="submit" class="btn btn-primary btn-md" role="button">Log in</button>
</div>
</form>
<span class="container" id="forgotten_password">
Forgot your password ?
</span>
</div>
But as you can obviously tell, this is not rendering the same way.
For example, I'd like to take back the width of the input.
For the rest, I use this line in my urls.py
re_path(r'^login/$', auth_views.login, {'template_name': 'main/login.html'}, name='login'),
And this one in my settings.py to get redirected to the right page :LOGIN_REDIRECT_URL = 'my_pls'
I googled a lot and finally used this link (in case you case notice something I didn't understand) : https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html#understanding-the-rendering-process
You should use custom HTML attributes on your **forms.py**.
It's simple:
from django import forms
class your_form(forms.Form):
attrs_for_the_field = {
'class': 'form-control',
'placeholder': 'Write here!',
}
field = forms.CharField(widget=forms.CharField(attrs=attrs_for_the_field))
With this code you will render the following HTML:
<input type="text" name="field" class="form-control" placeholder="Write here!" id="id_field">
Take a look at https://docs.djangoproject.com/en/2.0/ref/forms/widgets/ in order to know how Django represents an HTML input element.
You also should read https://docs.djangoproject.com/en/2.0/ref/forms/fields/ so that you could understand how it works.
You can add all the HTML configuration for the fields in the form code in forms.py . Than the form can be displayed with just {{ form.as_p}}.
Width of input can be retrieved with jQuery or JavaScript .
I have a form setup that is able to edit products inside of my database. What I would like to do is have the input fields be populated with the information of the product that a user is trying to edit, instead of having to manually enter in ALL the information (basically being able to highlight the information) I am using Flask along with Jinja2 and WTForms.
Here is my code for the form:
{% extends 'navbar.html' %}
{% block container %}
<link rel="stylesheet" href="{{url_for('static', filename='css/product-edit.css') }}">
<div class="top-pad" style="text-align: center;">
<div class="well">
<div class="row" id="product-form">
<h2 class="col-md-6" style="color: blue">Edit Product</h2>
</div>
<form method="POST" action="{{ url_for('my_view.product_edit', key=category_id) }}" role="form" id="product-form">
<div class="row">
<div class="form-group col-md-6">{{ form.brand.label }}: {{ form.brand() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.name.label }}: {{ form.name() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.price.label }}: {{ form.price() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.rating.label }}: {{ form.rating() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<!-- Category Dropdown -->
<label for="category col-md-6" id="category-select">Categories: </label>
<select name="category" id="category">
{% for category in categories %}
<option value="{{ category[0] }}">{{ category[1] }}</option>
{% endfor %}
</select>
<!-- END Category Dropdown -->
</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.year.label }}: {{ form.year() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.stock.label }}: {{form.stock() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.image.label }}: {{ form.image() }}</div>
</div>
<div class="row">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
I'm not even sure I am stating my question properly, please let me know if I need to clarify more. I will try my best.
I have redefined form for contact us page, It's standard django-form stuff, but I'm struggling to understand how can I write description inside <inpout> field.
To be precise I want to write Name inside <input> field, so how can I do this. I define <input> field like {{ form.name }}, so how can I define it more like <input type="name" class="form-control" id="id_name" placeholder="Your Name">.
<div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-2 col-lg-4">
{% if form.errors %}
<p style="color: red">
Please correct the error{{ form.errors|pluralize }} below.
</p>
{% endif %}
<form class="form-horizontal" action="." method="POST">
{% csrf_token %}
<div class="field form-group">
{{ form.name.errors }}
<label for="id_name" class="control-label"></label>
<div class="col-sm-10">
{{form.name}}
</div>
</div>
<div class="field form-group">
{{ form.email.errors }}
<label for="id_email" class="control-label"></label>
<div class="col-sm-10">
{{ form.email }}
</div>
</div>
<div class="field form-group">
{{ form.phone_number.errors }}
<label for="id_phone_number" class="control-label"></label>
<div class="col-sm-10">
{{ form.phone_number }}
</div>
</div>
<div class="field form-group">
{{ form.message.errors }}
<label for="id_message" class="control-label"></label>
<div class="col-sm-10">
{{ form.message }}
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="submit" class="btn btn-primary btn-block" value="Submit"></button>
</div>
</div>
</form>
</div><!--/end form colon -->
If you want to modify the placeholder text, or other values of the field Django creates, it can be done in the form code using the widget's attrs:
class MyForm(forms.Form):
name = forms.CharField(
widget=forms.TextInput(
attrs={
'class': 'my-class',
'placeholder': 'Name goes here',
}))
If your intention is to keep all of the code in the template you will have to manually create each input field instead of using the ones Django renders. You can still access the values of the generated field in the template to help you do that though.
<input name="{{ form.name.name }}" type="text" placeholder="Name field">
I am wondering how I can display each service array separately and not actually loop through all the django form query. This is how the loop is currently constructed. However I want to only view a few services - how can I achieve this. Here is the current loop...
<div class="form-group">
<label class="control-label" for="id_services_0">Services</label>
<div id="id_services" for="id_check_{{ forloop.counter0 }}">
{% for service in form.services.field.queryset %}
<div style="min-height:100px;" class="col-lg-3 checkbox" id="id_check_{{ forloop.counter0 }}">
<label for="id_services_{{ forloop.counter0 }}">
<div for="id_collapse_{{ forloop.counter0 }}">
{% if service.picture %}
<img class="img-responsive" src="{{ service.picture.url }}" height="50" width="50" alt="">
{% else %}
<img style="display:none;" src="https://placehold.it/50x50" alt="">
{% endif %}
<input class="" id="id_services_{{ forloop.counter0 }}" name="services" type="checkbox" value="{{ service.id }}" data-price="{{ service.fee }}">
{{ service }}<br>
<a class="more-details" role="button" data-toggle="collapse" href="#id_collapse_{{ forloop.counter0 }}" aria-expanded="false" aria-controls="collapseExample">More Details</a>
<div class="collapse" id="id_collapse_{{ forloop.counter0 }}">
<div class="well">
<p>
<small>
{{ service.description }}
</small>
</p>
</div>
</div>
</div>
</label>
</div>
{% endfor %}
</div>
</div>
First 10
{% for service in form.services.field.queryset.all|slice:":10" %}
From 2 to 4
{% for service in form.services.field.queryset.all|slice:"2:4" %}
n-th element
Remove for-loop and
first
{{ form.services.field.queryset.all.0 }}
second
{{ form.services.field.queryset.all.1 }}
Specific rows in services
QuerySet and Manager:
services/query.py
class ServiceQuerySet(QuerySet):
def opened(self):
return self.filter(status='OPEN')
services/manager.py
class ServiceManager(Manager):
def get_query_set(self):
return ServiceQuerySet(self.model, using=self._db)
def opened(self):
return self.get_query_set().opened()
Overwrite manager in model:
class Service(models.Model):
....
status = models.CharField(choices=['OPEN', 'CLOSE'], max_length=10)
objects = ServiceManager()
Use in template:
{{ form.services.field.queryset.opened.0 }}
{% for open_service in form.services.field.queryset.opened %}