I'm making my first website, using Django, python and bootstrap 5, I want a person to click the "submit" button after filling out the form and after that a modal window pops up in which it would say that "everything is OK, your application has been created"
<div class="row mt-5 mb-5 p-2">
<form action="{% url 'feedback_view' %}" method="POST">
{% csrf_token %}
<div class="col-md-6 mb-2">
<label for="exampleInputName" class="form-label">Ваше Имя</label>
<input name="name" class="form-control" id="exampleInputName" aria-describedby="NameHelp">
</div>
<div class="col-md-6 mb-2">
<label for="exampleInputphone" class="form-label">Ваш Телефон</label>
<input name="phone" class="form-control" id="exampleInputphone" aria-describedby="NameHelp" placeholder="+7 (918) 000-00-00">
</div>
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">send</button>
</form>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">send_btn</button>
but for some reason the "send" button does not work, but the "send_btn" button works, which I made to check the problem. all I understand at the moment is what bothers me, type="submit" because in the afternoon there is type="button". How can I solve this problem, given that this is a form submission button? this is the window code:
{% if messages %}
{% for message in messages %}
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="reviews">{{ message }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
it's views.py
class FeedBackView(View):
def post(self, request):
form = FeedBackForm(request.POST)
if form.is_valid():
form.save()
messages.add_message(request, settings.MY_INFO, 'now call you!')
else:
messages.add_message(request, settings.MY_INFO, 'something was wrong')
return redirect("/")
Related
I try to look up my signup view as a bootstrap modal but when click form doesn't show
class SignUpView(CreateView):
form_class = UserCreationForm
template_name = 'avapp/signup.html'
success_message = 'Success: Sign up succeeded. You can now Log in.'
success_url = reverse_lazy('index')
views.py
{% extends 'base.html' %}
{% load static %}
{% block content %}
<h1 style="text-align: center;color: #568203 " > Avakado App</h1>
<center>
<a class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#exampleModal " >
<img style="text-align: center" src="{% static '1_org.jpg' %}" width="300" height="450" >
</a>
</center>
{% endblock %}
index.html
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="/signup" method="POST">
<div class="modal-body">
{% csrf_token %}
{{form}}
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
signup.html
this is the modal form looks like
Can I figure it out without using Ajax or something else or do I have to change my signup view from class based views to something else
I am trying to build a website where you can upload a video (this already works). But when submitting a wrong file format, the Flask-WTF form closes the modal. I want it to stay open.
(I am trying it first with an image PNG)
This is the form:
class VideoUploadForm(FlaskForm):
video = FileField('Upload video', validators=[FileAllowed(['png']), FileRequired()])
submit = SubmitField('Upload')
This is the route:
#main.route("/video", methods=['GET', 'POST'])
#login_required
def video():
form = VideoUploadForm()
if form.validate_on_submit():
f = form.video.data
filename = secure_filename(f.filename)
f.save(os.path.join(
os.path.abspath(os.path.join(os.path.dirname(os.path.realpath(__file__)), os.pardir)), 'static\\videos', filename
))
flash('Video has been succesfully uploaded', 'success')
return redirect(url_for('main.video'))
return render_template('video.html', title='Upload video', form=form)
This is the modal:
<div class="modal fade mt-5" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Upload video</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="" enctype="multipart/form-data">
{{ form.hidden_tag() }}
<div class="modal-body">
{% if form.video.errors %}
{{ form.video(class="form-control form-control-lg is-invalid") }}
<p class="mt-1 ml-1"><small>Allowed formats: mov, mp4</small></p>
<div class="invalid-feedback">
{% for error in form.video.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.video }}
<p class="mt-1 ml-1"><small>Allowed formats: mov, mp4</small></p>
{% endif %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
{{ form.submit(class="btn btn-primary") }}
</div>
</form>
</div>
</div>
</div>
How to prevent the modal from closing when I try to upload a jpg file for example? For now it will close the modal and if opened again it shows the error message. But i want it to stay open so that you immediately can see the error message.
I want to display data in the popup, I have a list on products but when a user clicks on the product id then it should be open in popup according to that product id.
here is my views.py file...
def myview(request):
datas=TestForm.objects.all
template_name='test.html'
context={'datas':datas}
return render(request, template_name, context)
def myview(request, id):
display=TestForm.objects.get(pk=id)
template_name='test.html'
context={'display':display}
return render(request, template_name, context)
here is my test.html file...
{% for a in datas %}
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#exampleModal">
{{a.product_id}}
</button>
{% endfor %}
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<tr>
<td>{{datas.name}}</td>
<td>{{datas.price}}</td>
<td>{{datas.category}}</td>
</tr>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
Currently, it's displaying the only popup fields on click all products id's, Please let me know how it can display product data according to click product id.
You can solve this issue by making the modal id attribute unique with the pk value.
{% for a in datas %}
<button type="button" class="btn btn-primary" data-toggle="modal" data-
target="#exampleModal{{a.pk}}">
{{a.product_id}}
</button>
{% endfor %}
Now in the modal
{% for a in datas %}
<div class="modal fade" id="exampleModal{{a.pk}}" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
.......
{% endfor %}
I am trying to put a button inside an email input in a Django form.
This is the code with the button next to the email input:
<div class="container" id="notifyEmailFormContainer">
<form action="{% url "landing:notify_email_add" %}" method="post" id="notifyEmailForm">
{% csrf_token %}
<div class="form-group row">
<div class="col-sm-10 input-group" id="emailInput">
<div class="input-group-addon" id="comingSoonEmailIcon"><i class="fa fa-envelope fa fa-2x" aria-hidden="true"></i></div>
<input class="form-control" type="email" name="email" placeholder="Your email...." maxlength="255" required id="id_email"/>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-block btn-primary" onclick="addNotifyEmail()" id="submitNotifyEmail">Notify Me</button>
</div>
</div>
</form>
</div>
I have a tried a couple answers in similar questions but it seems I can't get it to work.
I'm using the following view function to iterate over 3 values (Channels_collection) within a form:
def index(request):
template = loader.get_template('adray/home page.html')
Channels_collection = ['You Tube', 'Google search', 'Google search']
return render(request, 'adray/home page.html', {'Channels_collection': Channels_collection})
Within the home page.html, i'm creating 3 bootstrap modals using a for loop using the 3 of the values that were passed by the view.
These modals, that are launched through a button, (the "start test" button, its really a link) redirect the user into another input data form, as following:
{% extends "base.html" %}
{% block content %}
<div id="page-inner">
<div class="row">
{% for channel_type in Channels_collection %}
<div class="panel panel-default">
<div class="panel-heading">
Testing {{ channel_type}}
</div>
<div class="panel-body">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Click To launch {{ channel_type}} Experiment
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Set Up {{ channel_type}} Experiment</h4>
</div>
<div class="modal-body">
Welcome to our tests, set up your experiment for {{ channel_type}} </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<form action="{% url 'input_data' %}" method="POST">
Start Test
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
Each iteration of the modal has its own channel_type value, my question is:
How can i save the value of channel type, when the button is being clicked?
Any help on that would be great!