I am trying to create a template which would take input items like item, quantity and unit price and render a pdf report of it with total price. Also i want the input to be on tabular form and add the lines dynamically by clicking + icon or something.
My folder structure is:
Project
|__ app
|__ template
|__ app.html
I am extending app.html from base.html which inherits bootstrap. Tried the below code but can't figure out how to do it.
{% extends 'base.html' %}
{% block head %}
{% endblock %}
{% block body %}
<div class="panel panel-default">
<div class="panel-body">
<div id="all_fields">
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Itemquantity" name="Itemquantity[]" value="" placeholder="Item Quantity">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="number" class="form-control" id="Quantity" name="Quantity[]" value="" placeholder="Quantity">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="number" class="form-control" id="Unitprice" name="Unitprice[]" value="" placeholder="Unit Price">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="all_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove form field :)</small></div>
</div>
{% endblock %}
If you want dinamic you should go to Javascript instead of Django, because Django is server side, django only will process your data after new request... so you can do it from scratch setting up one ajax to connect to your django while User is interacting with your page and create this new inputs based in something from server... or your inputs will be just generated in your HTML and only after sended to your backend will be hanlded by django (you will have to create your own logic)
Probabily there is any lib that already do that for your.
I do recommend to setup your javascript to dinamic create ids and new inputs, setup all inside one form tag, send this form to your backend, capture it in your post request and handle if... if you receive 5 inputs so it means there i 5 new itens...
Related
Hey good people of stackoverflow,
My application randomly selects a recipe from MongoDB (using pymongo) and displays it to the user.
My intention is to be able to apply filters (vegetarian, fish, beef and so on) to the next "random" selection after hitting Something else button.
I think I can achieve it by using request.form.getlist and creating the form in the pick_meal.html but it feels a bit overkill.
So far I am unable to figure it out.
Any help would be greatly appreciated.
The html and python function looks like this:
{% extends 'base.html' %}
{% block content %}
<div class="container">
<h3>{% block title %} You should cook: {% endblock %}</h3>
<div class="row">
<div class="col-md-5 align-self-center text-center">
<span>{{ dish.dish_name }}</span>
</br>
</br>
<a class="btn btn-outline-success" href="{{ dish['dish_source'] }}" role="button">Go to web</a>
</div>
<div class="col-md-4">
<img src="{{ dish.dish_image }}" width="250px">
</div>
</div>
</br>
<div class="row">
<div class="col-md-5">
<button class="btn btn-primary">Something else</button>
<button class="btn btn-primary">Configrm choice</button>
<button class="btn btn-primary">Already cooked</button>
</div>
<div class="col-md-5">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="vegetarian" id="flexCheckDefault" name="property_checkbox">
<label class="form-check-label" for="flexCheckDefault">Vegetarian</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="grill" id="flexCheckDefault" name="property_checkbox">
<label class="form-check-label" for="flexCheckDefault">Grill</label>
</div>
</div>
</div>
</div>
{% endblock %}
#app.route('/pick_meal/<string:dish_type>')
def pick_meal(dish_type):
# pick random meal based on category
dish = list(coll.aggregate([
{'$match':{
'cooked': False,
'dish_type': dish_type}},
{ '$sample':{
'size': 1 } }]))[0]
return render_template('pick_meal.html', dish=dish, dish_type=dish_type)
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 }}
This question already has answers here:
Post values from an HTML form and access them in a Flask view
(2 answers)
Closed 4 years ago.
I have a code like this. This is giving me 400 Bad request error. I found that there is only one form in the page from which the form is submitted.
#auth.route('/admin/project/add',methods = ['POST', 'GET'])
def addproject():
if request.method == 'POST':
projectname = request.form['projectname']
c, conn = connection()
query = "SELECT id from projects WHERE UPPER(project)='{}'".format(projectname)
c.execute(query)
value = c.fetchall
if value>0:
return render_template('addproject.html')
else:
flash("Project already exists. Please goto projects page and confirm. If it is and error, please contact devloper.")
return redirect(url_for('addproject'))
else:
return render_template('addproject.html')
I am also adding my HTML code for the form below. I tried a lot and is not able to figure out why I am keeping on getting that error. I also did small changes in my views.py,still the result is same.
<form action="/admin/project/add" id="myForm" method="POST" name="add">
<div class="form-body">
<div class="row p-t-20">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Project Name</label>
<input type="text" id="projectname" class="form-control" placeholder="Please enter project name" required >
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group has-danger">
<label class="control-label">Project Location</label>
<input type="text" id="projectlocation" class="form-control form-control-danger" placeholder="Please enter project location" required >
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<div class="row">
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Starting Date</label>
<input type="date" class="form-control" placeholder="dd/mm/yyyy" required >
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">End Date</label>
<input type="date" class="form-control" placeholder="dd/mm/yyyy" required >
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group has-danger">
<label class="control-label">Leader</label>
<input type="text" id="lead" class="form-control form-control-danger" placeholder="Please enter the leader for the project" required >
</div>
</div>
<div class="col-md-6">
<div class="form-group has-danger">
<label class="control-label">Current Status</label>
<select class="form-control" required>
<option value="">--Select--</option>
<option value="T">T</option>
<option value="D">D</option>
<option value="S">S</option>
</select>
</div>
</div>
</div>
<!--/span-->
<!--/span-->
</div>
<!--/row-->
<h5 class="box-title m-t-40">Project Description (optional)</h5>
<hr>
<div class="col-md-6">
<div class="form-group has-danger">
<TEXTAREA rows="8" cols="138"></TEXTAREA>
</div>
</div>
<!--/span-->
</div>
</div><div class="col-md-6">
<div class="form-actions">
<button type="submit" class="btn btn-success" name="add"> <i class="fa fa-plus" value="Add"></i> Add</button>
<button type="button" class="btn btn-inverse" onclick="viewproject();" name="cancel" value="Cancel">Cancel</button>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li<{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div></div>
</form>
The answer to your question is in the addproject.html file and the way that sends the parameter.
To solve it check for mistakes in the name of the parameter ('projectname'). See if the name is the same in the addproject.html file.
Another common problem is set incorrectly the 'content-type'.
After you edit your question with the form code, I saw you are using input id instead input name in the form.
The correct way is:
<input type="text" name="projectname" ... >
I hope this helps!
I'm creating a form. I've created a mobile block that renders on mobile and a desktop block that renders on desktop. There are several fields in this form, and it's working fine with the exception of the date field where I want someone to put in a date. On the mobile block, the date field is taking in a value perfectly. On the desktop block, it is not taking in any value. I end up getting this error when rendering the desktop version:
ValueError: time data '' does not match format '%Y-%m-%d'
The HTML looks like this (I've eliminated a big chunk of the fields in the form for simplicity, let me know if you need to see more of the HTML):
<form method="POST">
<div class="mobile-only">
<div class="form-group row">
<div class="col-12 col-md-2 col-lg-4">
<label for="start-date" class="col-form-label">
<h4>Start Date: <sup class="required">(required)</sup></h4>
</label>
</div>
<div class="col-12 col-md-10 col-lg-4">
<input type ="date" maxlength="10" class="form-control" id="start-date" name="start-date" placeholder="MM/DD/YYYY">
</div>
</div>
<div class="row">
<div class="col-3 col-md-1">
<button class="green-button link-text" type="submit" id="submit" type="submit">Save</button>
</div>
<div class="col-3 col-md-1">
<button class="green-button">Cancel</button>
</div>
</div>
</div>
The above code works fine on mobile, below is what is rendered on desktop, and gives me the above referenced error:
<div class="desktop-only">
<div class="form-group row">
<div class="col-lg-1">
<label for="start-date" class="col-form-label">
<h4>Start Date: <sup class="required">(required)</sup></h4>
</label>
</div>
<div class="col-lg-3">
<input type ="date" maxlength="10" class="form-control" id="start-date" name="start-date" placeholder="MM/DD/YYYY">
</div>
</div>
<div class="row">
<div class="col-3 col-md-1">
<button class="green-button link-text" type="submit" id="submit" type="submit">Save</button>
</div>
<div class="col-3 col-md-1">
<button class="green-button">Cancel</button>
</div>
</div>
</div>
</form>
Also, in case it's relevant, I'm using Bootstrap 4 and the backend is a Flask App with Python. Any idea what the issue is?
your placeholder indicates to user this format:
placeholder="MM/DD/YYYY"
but then elsewhere in the code you are expecting:
format '%Y-%m-%d'
which is your error, if you trying to upload to database you should use YYYY-MM-DD as this is international standard, then in your front end convert to MM/DD/YYYY.
If you asking for input of MM/DD/YYYY, you need to convert it to YYYY-DD-MM
I trying to make a templatetags for built all the bar in the site. I followed all the doc, but it still not working.
i created the app "bar" and added to the app in settings.py
in /bar/
-- __init__.py
-- templatetags/
-- -- nav_bar.py
-- -- __init__.py
in /templates/
-- top_bar.html
Now nav_bar.py is:
from django import template
register = template.Library()
#register.inclusion_tag('top_bar.html')
def show_topbar():
user_login = 'prova'
return {'user_login': user_login}
it does not have sense, but just for try. In future user_login will show if the user is logged, something like request.user.is_authenticated() and than others info.
top_bar.html is:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SkillAsk.com</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact {{ user }}'s</li>
{% if user_login %}
<div class="navbar-form navbar-right">Log Out
</div>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">
{{ user.username }}'s <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/backoffice/">Profilo</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/backoffice/setting">Impostazioni</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/backoffice/skills/add">Aggiungi Skill</a></li>
</ul>
</li>
</ul>
<!-- Authenticate account menu -->
{% else %}
<form action="/accounts/login/?next=/backoffice" method="post" accept-charset="utf-8" class="navbar-form navbar-right">{% csrf_token %}
<div class="form-group">
<input type="text" placeholder="UserName" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" name="password" id="password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
{% endif %}
</div><!--/.navbar-collapse -->
</div>
</div>
(i tried even with a very simple template instead all that stuff but does not change the result)
now in base.html i loaded the templatetag with
{% load staticfiles %}
{% load nav_bar %}
bla bla bla
bla bla
and printed the template
{{ show_topbar }}
...where i wanted to put the bar. Its seem very very very simple, but the output is nothing with no error.
If i delete the template top_bar.html nothing change, no error... if i change the template name, no error...
IMHO the problem is in register inclusion... Originally i wanted to use some response_to_render in return... but the example in docs dont use render.
Why i cant print my template in every page? I'm so curious!
Thank you
NOTE: just for info, i use another template called home.html that extend base...
p.s. in setting I defined the template dir... all the others template are still working.
You are using the variable syntax instead of the template tag syntax to call your tag. You should do this:
{% show_topbar %}
Well, your call to template tag is not good. You should use:
{% show_topbar %}
More informations : Documentation