I have created a flask form, embedded in a bootstrap 5 modal. The modal looks like this:
When I click "Weiter" I want to be able to both move to the next modal, and validate and collect the data from the form in my flask form. I can't work out how to create this action with the flask WTF SubmitField. Here is my modal:
<div class="modal fade" id="Modal_1_Toggle" aria-hidden="true" aria-labelledby="Modal_1_ToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Modal_1_ToggleLabel">Stufe 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="POST" enctype="multipart/form-data">
{{ form_1.csrf_token }}
<p>
{{ form_1.optimise_option.label(class="form-label") }}
{{ form_1.optimise_option(class="form-select form-select-sm") }}
</p>
{{ form_1.submit(class="btn btn-primary") }} <--- THIS IS WHERE I WANT TO TRIGGER THE NEXT MODAL AND RETURN THE FORM DATA
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal" data-bs-dismiss="modal">Weiter</button>
^^THIS IS THE BOOSTRAP BUTTON, IDEALLY THIS WOULD BE MY SUBMITFIELD BUTTON
</div>
</div>
</div>
</div>
I thought I might be able pass the bootstrap css variables from the bootstrap button directly to the SubmitField as arguments like this:
{{ form_1.submit(class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal" data-bs-dismiss="modal") }}
But it seems this is not possible. Any help would be really appreciated.
I'd like to get data from one form that has multiple textareas inside , In my views: 'compare_ingredients' I've tried requesting data from my form id 'compareform' also the textarea id 'ingredients', but when I enter something into one texture and click on submit it comes back as 'None' when I print. Here is my html and views:
html :
<div class="container-fluid">
<h4>Please enter in your ingredients:</h4>
<h6>(Seperate each item by comma)</h6>
<br>
<button class="add_item">Add Item</button>
<br>
<div class="row row-cols-1 row-cols-md-2 mx-auto">
<form action="{% url 'compare_ingredients' %}" method="POST" name="compareform" id="compare">
{% csrf_token %}
<br>
<button type="submit" class="btn btn-info sub_btn">Submit</button>
<button type="submit" class="btn btn-secondary back_button">
Back
</button>
<br>
<br>
<div class="row form_row">
<div class="col mb-4">
<h5>Item 1</h5>
<div class="card form_card">
<div class="card-body compare_cardbody">
<textarea name="ingredients1" id="ingredients" cols="30" rows="10" form="compareform"></textarea>
</div>
</div>
</div>
<div class="col mb-4">
<h5>Item 2</h5>
<div class="card form_card">
<div class="card-body compare_cardbody">
<textarea name="ingredients2" id="ingredients" cols="30" rows="10" form="compareform"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
views.py:
def compare_ingredients(request):
if request.method == "POST":
ingredients = request.POST.get('compareform')
print(ingredients)
return render(request, 'result/compare.html')
ok, I figured it out , the problem was in the html textarea I had the name of the form as 'compareform' when it should have been 'compare' :
<textarea name="ingredients2" id="ingredients" cols="30" rows="10" form="compare"></textarea>
then in my views I did:
ingredients1 = request.POST.get('ingredients1')
I'm New in Django 2. I was trying to upload a file in Django here is my code
View.py
def addBook(request):
checkName = AddBook.objects.filter(title=request.POST.get('title'))
if not checkName:
bookAdd = AddBook(
title=request.POST.get('title'),
slug=slugify(request.POST.get('title')),
description=request.POST.get('description'),
cover_image=request.FILES.get('cover_image'),
file=request.FILES.get('file'),
category=request.POST.get('category'),
created_by=request.user.id,
)
bookAdd.save()
messages.add_message(request, messages.INFO, 'Book Saved Successfully')
return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
else:
messages.add_message(request, messages.INFO, 'Book Title Already Exists')
return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
Update As per Comment
Here is my template code
bookSave.html
<form action="{% url 'addBook' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="modal-body">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs 12">
<div class="form-group ic-cmp-int">
<div class="form-ic-cmp">
<i class="notika-icon notika-edit"></i>
</div>
<div class="nk-int-st">
<input type="text" class="form-control input-sm" required="required" name="title"
Placeholder="Title">
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group ic-cmp-int">
<div class="form-ic-cmp">
<i class="notika-icon notika-mail"></i>
</div>
<div class="nk-int-st">
<textarea class="form-control input-sm" required="required" name="description"
placeholder="Description"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group ic-cmp-int">
<div class="form-ic-cmp">
<i class="notika-icon notika-dollar"></i>
</div>
<div class="nk-int-st">
<input type="file" name="cover_image" required="required" class="form-control input-sm">
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group ic-cmp-int">
<div class="form-ic-cmp">
<i class="notika-icon notika-house"></i>
</div>
<div class="nk-int-st">
<input type="file" name="file" required="required" class="form-control input-sm">
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group ic-cmp-int">
<div class="form-ic-cmp">
<i class="notika-icon notika-next"></i>
</div>
<div class="nk-int-st">
<input type="text" name="category" required="required" class="form-control input-sm"
Placeholder="Category">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
I can save everything but I need to save the file path and save the file locally. I read their documentation but cannot help me out. Please help me to solve this problem
The FileField in your Model, besides the other fields, should look like this:
class AddBook(models.Model):
# file will be uploaded to MEDIA_ROOT/uploads
file = models.FileField(upload_to='uploads/')
# or...
# file will be saved to MEDIA_ROOT/uploads/2015/01/30
file = models.FileField(upload_to='uploads/%Y/%m/%d/')
In your settings file, you’ll need to define MEDIA_ROOT as the full path to a directory where you’d like Django to store uploaded files. (For performance, these files are not stored in the database.) Define MEDIA_URL as the base public URL of that directory. Make sure that this directory is writable by the Web server’s user account.
in settings.py you should set for example:
MEDIA_ROOT = '/home/foo/bar/yourproject/assets'
Also you might want to study and set static files storage in Django (besides the ‘static’ folder).
https://docs.djangoproject.com/en/2.0/howto/static-files/#configuring-static-files
In Django you can get any file with the File Object like:
from django.core.files import File
# Open an existing file using Python's built-in open()
f = open('/path/to/mybookfile.pdf')
myfile = File(f)
So, I've been racking my brain on this for 2 days now. Any help would be awesome!
At the heart of my issue, I believe, is that I have nested modals and a custom bootstrap form in both: the first for login, and the second for signup. Let's assume in one case I want to do all my validations server-side, and possibly get full control over each of the error validation messages, as well as how and where they should appear respective to their input. How do I do that using django.contrib.messages?
** If I could use some of Bootstrap 4's built-in methods for validation as a first line of defense, or data-validate-on-blur to work like how it does with Zurb Foundation's Abide, even better.
Template tags in each base.html modal:
{% if messages %}
<div class='container-fluid bg-white mt-5 pt-5 pl-4 mb-4'>
{% for message in messages %}
<p class="small font-poller text-danger">{{ message }}</p>
{% endfor %}
</div>
{% endif %}
Trials and tribulations thus far:
As it stands, and with the various work-arounds I've found on Stack Overflow, i.e. using jQuery to toggle the modal (not the prettiest as it reloads the page), the best I've been able to do still bleeds my messages in between modals and/or my redirect views.
I've read threads on how to clear Django messages, and thought that might be a fix, so if after I close a modal or open a new modal, the messages essentially are cleared out until the form is submitted once again. In other words, the login error messages are unique to the login modal when its form's submit button is pressed, and signup error messages are unique to the signup modal when its form's submit button is pressed.
Unfortunately, I haven't figured out how to use a view (views.py), to successfully achieve this. The thought comes to mind that since because I'm using modals to trigger that event, I would have to use jQuery for that, but I have failed on that front also. I'm really hoping there is a more straight-forward solution to this.
Thanks in advance,
Dev
PS - my snippets:
views.py
def signup(request):
signup_errors = User.objects.validation(request.POST, 'register')
if len(signup_errors):
for error in signup_errors.values():
messages.error(request, error)
return redirect('/')
else:
new_user = User.objects.create(
first_name = request.POST['first_name'],
last_name = request.POST['last_name'],
dob = request.POST['dob'],
phone = request.POST['phone'],
address = request.POST['address'],
city = request.POST['city'],
state = request.POST['state'],
zipcode = request.POST['zipcode'],
email = request.POST['email'],
password =
bcrypt.hashpw(request.POST['password'].encode(), bcrypt.gensalt()))
request.session['first_name'] = new_user.first_name
request.session['id'] = new_user.id
messages.info(request, 'You have successfully submitted your
information.')
return redirect('/menu')
def login(request):
login_errors = User.objects.validation(request.POST, 'login')
if len(login_errors):
for error in login_errors.values():
messages.error(request, error)
return redirect('/')
else:
current_user = User.objects.get(email=request.POST['email'])
request.session['first_name'] = current_user.first_name
request.session['id'] = current_user.id
messages.info(request, 'You have successfully logged in.')
return redirect('/menu')
models.py
class UserManager(models.Manager):
def validation(self, postData, error_validation):
errors = {}
if error_validation == 'register':
if not NAME_REGEX.match(postData['first_name']):
errors['first_name'] = "First name can only contain
letters!"
if len(postData['last_name']) < 1:
errors['last_name'] = "Last name cannot be blank."
if not NAME_REGEX.match(postData['last_name']):
errors['last_name'] = "Last name can only contain letters!"
if error_validation == 'login':
user = User.objects.filter(email=postData['email'])
if not user:
errors['user_login'] = "No account with that email in
our system."
elif not bcrypt.checkpw(postData['password'].encode(),
user[0].password.encode()):
errors['password_login'] = "Invalid email and/or
password!"
return errors
login modal in base.html
<div class="modal fade text-dark" id="loginModal">
<div class="modal-dialog">
<div class="modal-content font-paytone">
<div class="modal-header shadow p-3 bg_primary rounded">
<h5 class="modal-title font-poller text-light text_shadow_success2" id="loginModal">Login <i class="fa fa-user text-center ml-1"></i></h5>
<button class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">
<form id="login-form" action="{% url 'ecommerce_app:login' %}" method="POST" novalidate>
{% csrf_token %}
<div class="form-group">
<input type="email" name="email" class="form-control form-control-lg" placeholder="Email" required>
</div>
<div class="form-group">
<input type="password" name="password" class="form-control form-control-lg" placeholder="Password" required>
</div>
<input id="login-form-submit-btn" type="submit" class="btn btn-success btn-block border bg_primary btn_login" value="Log In">
</form>
<p class="pt-2 font-passion">Don't have an account? Sign up below!</p>
<button id="login-form-signup-btn" class="btn btn-info btn-block border" data-toggle="modal" data-target="#registerModal">Sign Up</button>
</div>
{% if messages %}
<div class="modal-footer">
<div class='container-fluid bg-white'>
{% for message in messages %}
<p class="small font-poller text-danger">{{ message }}</p>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
register modal in base.html
<div class="modal fade text-dark" id="registerModal">
<div class="modal-dialog">
<div class="modal-content font-paytone">
<div class="modal-header shadow p-3 bg_primary rounded">
<h5 class="modal-title font-poller text-light text_shadow_info" id="registerModal">Sign Me Up! <i class="fa fa-user-plus ml-1"></i></h5>
<button class="close" data-dismiss="modal"><span>×</span></button>
</div>
<div class="modal-body">
<form id='signup-form' action="/signup/" method="POST" novalidate>
{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6">
<label for="first_name">First Name</label>
<input type="text" name="first_name" class="form-control" required>
</div>
<div class="form-group col-md-6">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" class="form-control" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="dob">Date of Birth</label>
<input type="date" name="dob" class="form-control" required>
</div>
<div class="form-group col-md-6">
<label for="phone">Phone #</label>
<input type="tel" name="phone" class="form-control" required>
</div>
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" name="address" class="form-control" placeholder="Street" required>
</div>
<div class="form-group">
<div class="form-row">
<div class="col-7">
<input type="text" class="form-control" name="city" placeholder="City" required>
</div>
<div class="col">
<input type="text" class="form-control" name="state" placeholder="State" required>
</div>
<div class="col">
<input type="text" pattern="[0-9]{5}" name="zipcode" class="form-control" placeholder="Zip" required>
</div>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<!-- <label for="password">Password</label> -->
<input type="password" name="password" class="form-control" placeholder="Password" required>
</div>
<div class="form-group col-md-6">
<!-- <label for="confirm">Confirm Password</label> -->
<input type="password" name="confirm" class="form-control" placeholder="Confirm Password" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info btn-block font-fredoka">Register</button>
{% if messages %}
<div class='container-fluid bg-white mt-5 pt-5 pl-4 mb-4'>
{% for message in messages %}
<p class="small font-poller text-danger">{{ message }}</p>
{% endfor %}
</div>
{% endif %}
</div>
</form>
</div>
</div>
</div>
PSS - if I can help to clarify anything else please let me know
Well, I think I solved my own problem and am somehow compelled to share with others the solution as I think I actually lost sleep over this one. Anyway, I'm not really sure if this is what Django message class 'extra_tags' attribute was originally intended for, but for all intents and purposes it is a clean fix and allows me control over both server-side and client validation messages.
First, I assign extra_tags to 'register' and 'login' respectively when I create and append each message instance:
views.py
def signup(request):
errors = User.objects.validation(request.POST, 'register')
if len(errors):
for error in errors.values():
messages.add_message(request, messages.ERROR, error, extra_tags="register")
return redirect('/')
def login(request):
errors = User.objects.validation(request.POST, 'login')
if len(errors):
for error in errors.values():
messages.add_message(request, messages.ERROR, error, extra_tags="login")
return redirect('/')
I check to see if there are messages, then iterate through them, checking if the tag is 'register' (or 'login'), and if so, render some text, if not, don't render anything.
base.html
{% if messages %}
{% for message in messages %}
{% if 'register' in message.tags %}
<p class="small font-poller text-danger registration_error_message">{{ message }}</p>
{% endif %}
{% endfor %}
{% endif %}
Last but not least, after you submit the form through either modal, you will need to reload the modal with the aforementioned error (or success) messages. To have each modal show its respective messages you will have to differentiate and then toggle to open each one the same way I did using template_tags in the base.html, only this time using a little jQuery:
<script>
$(document).ready(function() {
{% if messages %}
{% for message in messages %}
{% if 'login' in message.tags %}
$('#loginModal').modal('toggle');
{% elif 'register' in message.tags %}
$('#registerModal').modal('toggle');
{% endif %}
{% endfor %}
{% endif %}
});
</script>
My Flask app already serves up several pages. I just made channels.html. For a route, I copied down and changed /messages, which already works. I then tried adding a link from messages.html to channels.html, but received the error: Could not build url for endpoint 'channels'. Did you mean 'index' instead? The error references the line Channels in messages.html. I checked spelling, syntax, decorator placement, and duplicative names; everything looks ok. Plus, the new code was built off of code that was previously tested.
So, why the error?
#app.route('/channels', methods=["GET", "POST"])
def channels():
return render_template("channels.html")
#app.route('/messages', methods=["GET", "POST"])
def messages():
return render_template("messages.html")
messages.html (top part)
{% extends "layout.html" %}
{% block body %}
<div class="container">
<div class="row" style="min-height: 100vh">
<div class="col-md-3 border border-danger rounded">
<div class="row mt-2 justify-content-start">
Header
</div>
<!-- <div class="row mt-2 justify-content-start" id="channelHeader">
Channels
</div>-->
<div class="row mt-2 justify-content-start" id="channels">
Channels
</div>
<div class="row justify-content-start" id="dmsg">
Direct Messages
</div>
</div>
<div class="col-md-9 border border-danger rounded">
{% endblock %}
channels.html
{% extends "layout.html" %}
{% block body %}
<div class="container">
<div class="display-3">
<strong>Create A Channel</strong>
</div>
<form action="{{ url_for('channels') }}" id="channelForm" class="mt-4">
<!-- Will need check for duplicate email -->
<div class="form-group">
<label for="channelName">Channel Name</label>
<input type="text" class="form-control" id="channelName" aria-describedby="channelName" placeholder="Enter Channel Name">
</div>
<!-- Will need check for duplicate username -->
<div class="form-group">
<label for="inviteUsers">Invite Other Users (optional)</label>
<input type="text" class="form-control" id="inviteUsers" aria-describedby="inviteUsers" placeholder="Search by name">
</div>
<div class="form-group">
<label for="purpose">Purpose</label>
<textarea type="text" class="form-control" id="purpose" rows="3" placeholder="Purpose">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
{% endblock %}