I am currently working on forms with django-widget-tweaks, I want to add error class to div not in input, here is my code
<div class="form-group">
<label class="control-label" for="id_title">Title</label>
{% render_field form.title|add_class:"form-control"%}
</div>
if getting error it should be
<div class="form-group has-error">
<label class="control-label" for="id_title">Title</label>
<input type="text" name="title" value="akjdla" id="id_title" class="form-
control" required="" placeholder="Title" title="" maxlength="120">
<div class="help-block">This field is required.</div>
</div>
In documentation I found only adding the class in input, how can I add error class to outer div and show error down to it?
<div class="form-group" {% if form.title.errors %} has-error {% endif %}>
<label class="control-label" for="id_title">Title</label>
{{ form.title|add_class:"form-control" }}
<div class="help-block">{{ form.title.errors }}</div>
</div>
Related
This question already has answers here:
Flask view return error "View function did not return a response"
(3 answers)
Closed 8 months ago.
flask code
#bp.route('/delete/<int:id>')
#login_required
def delete_tracker(id):
if Trackers.user_id == current_user.id:
trackers = Trackers.query.filter_by(id=id).first()
print(trackers)
db.session.delete(trackers)
db.session.commit()
return redirect(url_for("authen.dashboard"))
Html code- look for /delete url t bottom there is the error
{% extends "base.html" %}
{% block title %} Dashboard {% endblock %}
{% block content %}
<nav class="sidenav">
<div class="main-buttons">
<a class="nav-link active" id="trackers" aria-current="page" href="/dashboard">Trackers</a>
<a class="nav-link active" id="goals" aria-current="page" href="/goals">Goals</a>
<div>
</nav>
<div id="dashbar">
<nav class="navbar bg-light">
<div class="container-fluid">
<button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">
Add Tracker
</button>
<form method="POST">
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add a Tracker</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="tracker_name" class="col-form-label">Tracker Name:</label>
<input type="text" class="form-control" id="tracker_name" name="tracker_name"
placeholder="Enter a Tracker name">
<div class="from-fieldset" style="width:200px;">
<label for="tracker_type" class="form-label">Choose a Tracker type:</label>
<select id="tracker_type" name="tracker_type">
<option value="">choose Tracker type</option>
{% for t in data_trackers %}
<option value="{{t.name}}">{{t.name}}</option>
{% endfor %}
<label for="tracker_description " class="col-form-label">Description</label>
<input type="text" class="form-control" id="tracker_description" name="tracker_description"
placeholder="Enter Description">
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-light border-dark">Submit</button>
</div>
</div>
</div>
</div>
</form>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div class="wrapper">
<div class="container-tracker">
{% for track in user.trackers %}
<div class="tra">
<h3 id="trackername"> {{track.tracker_name}}</h3>
<div class="dropdown-container" tabindex="-1">
<form method="GET" action="/delete/{{track.id}}">
<button type="submit" class="btn btn-outline-light">Delete</button>
</form>
<div class="three-dots"></div>
<div class="dropdown">
<a href="#">
<div>Records and Graphs</div>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
( in form method=GET , the delete url is there and the flask code is at top for that endpoint
if I remove if condition in the delete_tracker() fucntion that is if user.id==current_user.id then I will get a different error that is , this is for session 2nd but this is 3rd session something like this, so my file I want to delete is different session )
can you try to change your line
#bp.route('/delete/<int:id>')
to
#bp.route('/delete/<track.id>')
I have a problem to pass multiple value that has the same class in select element(because i use ajax to load the value of the option element)
example :
<div class="form-group">
<button class="btn btn-theme" onclick="appendBox()">Add</button>
<label class="control-label col-md-3">Column Name</label>
<div class="col-md-4" id ="test">
<div class="input-group bootstrap-timepicker">
<div class="btn-group">
<select class ="columnselect" style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;">
{% for data2 in obj %}
<option value="{{data2}}">{{data2}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-theme" onclick="appendFilterBox()">Add</button>
<label class="control-label col-md-3">Filter</label>
<div class="col-md-4" id="filtbox">
<div class="input-group bootstrap-timepicker">
<div class="btn-group">
<select class="columnselect" style="width:125px;background-color:white;height:30px;font-size:15px;text-align-last:center;">
{% for data2 in obj %}
<option value="{{data2}}">{{data2}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
How can i pass all this value that has the same class? because i want to pass 2 value to the views django , and want to print it in console
# you need to specify names of the field to get the value in the views and if you want to get multiple values for the same select tag, you need to apply multiple attribute of html
# html file
<div class="form-group">
<button class="btn btn-theme" onclick="appendBox()">Add</button>
<label class="control-label col-md-3">Column Name</label>
<div class="col-md-4" id ="test">
<div class="input-group bootstrap-timepicker">
<div class="btn-group">
<select name="first-field" class="columnselect" style="width:425px;background-color:white;height:30px;font-color:red;text-align-last:center;" multiple>
{% for data2 in obj %}
<option value="{{data2}}">{{data2}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-theme" onclick="appendFilterBox()">Add</button>
<label class="control-label col-md-3">Filter</label>
<div class="col-md-4" id="filtbox">
<div class="input-group bootstrap-timepicker">
<div class="btn-group">
<select name="second-field" class="columnselect" style="width:125px;background-color:white;height:30px;font-size:15px;text-align-last:center;" multiple>
{% for data2 in obj %}
<option value="{{data2}}">{{data2}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
# views.py
def functionname(request):
# if multiple is applied on your select tag
first_field = request.POST.getlist('first-field')
# if multiple is not applied on your select tag
first_field = request.POST.get('first-field')
print(first_field)
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 trying to get both these buttons to display next to each other. Not sure why they keep displaying ontop of one another. I am using flask-wtf and bootstrap 3.
<div class="container">
<div class="row">
<div class="col-xs-11 col-sm-5 col-lg-5 center-block">
<form class="form-horizontal">
<div class="form-group">
<label for="title" class="control-label">Save:</label>
{{ form.title(class="form-control input-lg", type="text", id="title" ) }}
</div>
<div class="form-group">
{{ form.submit(class="btn btn-danger btn-lg btn-block") }}
{{ form.submit_2(class="btn btn-primary btn-lg btn-block") }}
{{ form.csrf_token }}
</div>
</form>
</div>
</div>
</div>
Don't use the btn-block class. This makes the display type block instead of inline-block. If for some reason you must use btn-block, then you'll have to float the elements left and set their widths.
float: left;
width: 45%;
But the easiest is just to remove the btn-block class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-11 col-sm-5 col-lg-5 center-block">
<form class="form-horizontal">
<div class="form-group">
<label for="title" class="control-label">Save:</label>
</div>
<div class="form-group">
<div class="btn btn-danger btn-lg"> </div>
<div class="btn btn-primary btn-lg"> </div>
</div>
</form>
</div>
</div>
</div>
Figured it out. Just needed to break up the row into two.
<div class="container">
<div class="row">
<div class="col-xs-11 col-sm-5 col-lg-5 center-block">
<form class="form-horizontal">
<div class="form-group">
<label for="title" class="control-label">Save:</label>
{{ form.title(class="form-control input-lg", type="text", id="title" ) }}
</div>
<div class="form-group">
<div class="col-xs-6">
{{ form.submit(class="btn btn-danger btn-lg btn-block") }}
</div>
<div class="col-xs-6">
{{ form.submit_2(class="btn btn-primary btn-lg btn-block") }}
</div>
{{ form.csrf_token }}
</div>
</form>
</div>
</div>
</div>
The buttons could be "grouped" together:
<div class="btn-group">
{{ button1 }}
{{ button2 }}
</div>
Note that they will be joined together (no space between).