i'm new in Django programming
i want to create a multi step form using bootstrap5
I have installed bootstrap 5 using
this command : pip install Django-bootstrap-v5
the problem is when i search how to create a this step form
i find many solution that use Js & CSS code imported from static files
like this :
orm id="regForm" action="">
<h1>Register:</h1>
<!-- One "tab" for each step in the form: -->
<div class="tab">Name:
<p><input placeholder="First name..." oninput="this.className = ''"></p>
<p><input placeholder="Last name..." oninput="this.className = ''"></p>
</div>
<div class="tab">Contact Info:
<p><input placeholder="E-mail..." oninput="this.className = ''"></p>
<p><input placeholder="Phone..." oninput="this.className = ''"></p>
</div>
<div class="tab">Birthday:
<p><input placeholder="dd" oninput="this.className = ''"></p>
<p><input placeholder="mm" oninput="this.className = ''"></p>
<p><input placeholder="yyyy" oninput="this.className = ''"></p>
</div>
<div class="tab">Login Info:
<p><input placeholder="Username..." oninput="this.className = ''"></p>
<p><input placeholder="Password..." oninput="this.className = ''"></p>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
but for my situation there is no file in static directory
please can you help me
Related
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')
'''
My problem is database values can't stored properly
In below I uploded views functions file,model file as an images. so in model there are three fields but database stored only image stored and other vlaues strored by default get null values so can you help to solving my problem..
'''
userproblem.html
<form method="POST" action="/uploadoc/" enctype="multipart/form-data" data-toggle="validator">
{% csrf_token %}
<div id="progressbarwizard">
<ul class="nav nav-pills bg-light nav-justified form-wizard-header mb-3">
<li class="nav-item">
<a href="#account-2" data-toggle="tab" class="nav-link rounded-0 pt-2 pb-2">
<i class="mdi mdi-account-circle mr-1"></i>
<span class="d-none d-sm-inline">Query Form</span>
</a>
</li>
</ul>
<div class="tab-content b-0 mb-0">
<div class="tab-pane" id="account-2">
<div class="row">
<div class="col-md-5">
<label class="col-md-12 col-form-label">Query Types:
<span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" class="form-control" data-validate="true" name="queryn" placeholder="Enter Query Types">
</div>
</div>
<div class="col-md-5">
<label class="col-md-12 col-form-label">Description of Query:
<span class="text-danger">*</span></label>
<div class="col-md-12">
<textarea type="text" class="form-control" data-validate="true" name="querydec" placeholder="Description of Query"></textarea>
</div>
</div>
</div><!-- /.First row end --><br>
<div class="row">
<div class="col-md-5">
<label for="Emailadrress" class="col-md-12 col-form-label">Upload Your File:
<span class="text-danger"></span></label>
<div class="col-md-12">
<div class="input-group-append">
<input type="file" id="img" name="img" accept="image/*">
</div>
</div>
</div>
<div class="col-md-6">
<label for="Emailadrress" class="col-md-12 col-form-label">Solutions:
<span class="text-danger"></span></label>
<div class="col-md-12">
<div class="input-group-append">
<textarea type="text" name="querysol" placeholder="Solutions of Query"></textarea>
</div>
</div>
</div>
</div> <!-- /.second row end -->
</div><br>
<div class="row">
<div class="col-12">
<div class="text-center">
<div class="mb-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<button type="submit" class="btn btn-primary">
<i class="icon-user icon-white"></i> Submit
</button>
</div>
</div>
</div>
</div> <!-- end col -->
</div>
</div> </div>
</form>
'[This is error and views function file my model imagespage][1]
You are trying to set c variable from userProblemModel named POSTed data in your uploadoc view.
c = request.POST.get('userProblemModel')
But in your form in html side there is no userProblemModel named input tag. That is why you are getting None value in c variable.
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)
I have a form in a url.
I want to load it in an existing page.
I'm following this tutorial https://www.abidibo.net/blog/2014/05/26/how-implement-modal-popup-django-forms-bootstrap/
This is the form template
{% load i18n widget_tweaks %}
<div class="modal-dialog modal-lg" role="document">
<form action="{% url 'flag_post' %}" method="post" id="flag-form" class="form">{% csrf_token %}
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Report Post</h4>
</div>
<div class="modal-body">
{{ form.media }}
{% render_field form.reason class="form-control" %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Save changes" />
</div>
</div><!-- /.modal-content -->
</form>
</div><!-- /.modal-dialog -->
<script>
var form_options = { target: '#modal', success: function(response) {} };
$('#flag-form').ajaxForm(form_options);
</script>
This is my link that is supposed to load the form
<a class="fa fa-pencil" data-toggle="modal" href="{% url 'flag_post' node.uid %}" data-target="#modal" title="edit item" data-tooltip></a> |
I have the following script tag embedded
<script src="http://malsup.github.com/jquery.form.js"></script>
When I call the url directly the form is displayed, but when I try clicking the button form is not loaded.
What is wrong with my code?
Is this the right way to load a form from an external URL?
I didn't have a modal placeholder.
Now I have
Report
Then at the bottom of the page
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>
And it works! No JS and no other problems.
Now all I need to do is ajaxify my form submission.
Thanks #Sumeet Kumar
This link helped me
https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=modal-with-remote-url
I have the following situation: At the user's area on the website he can see all his real estate posts in a table. There is a "trash button" for each one of the posts. When he press the button I want do delete from DB the exact instance he choose.
This is the HTML that I have. Please note that I used an to use a view to access the DB and then delete from DB. But I don't know how to send the exactly parameters to find it on the DB.
<div class="container">
<div class="col-xs-12">
<h1>Olá, {{ request.user.first_name }}</h1>
</div>
<div class="row col-md-12 col-md-offset-0 custyle">
<table class="table table-striped custab">
<thead>
<tr>
<th>Imagem Principal</th>
<th>Data Criação</th>
<th>Tipo do Anúncio</th>
<th>Tipo do Imóvel</th>
<th>Preço Venda</th>
<th>Visualizações</th>
<th>Expira</th>
<th>Status</th>
<th class="text-center">Action</th>
</tr>
</thead>
{% for anuncio in anuncios %}
<tr >
<td>
<div class="embed-responsive embed-responsive-16by9">
<img class="embed-responsive-item" src="{{anuncio.imagem_principal.url}}">
</div>
</td>
<td>Falta</td>
<td>{{anuncio.tipo_anuncio}}</td>
<td>{{anuncio.tipo_imovel}}</td>
<td>R$ {{anuncio.preco_venda}}</td>
<td>Falta</td>
<td>News Cate</td>
<td>News Cate</td>
<td><p data-placement="top" data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
<span class="glyphicon glyphicon-trash"></span>
</button></p>
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder="Mohsin">
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Irshad">
</div>
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>
</div>
<div class="modal-footer form-actions">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
<button type="submit" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
I am practing what I learnt in a book, so I don't want to go for AJAX yet.
Make the button inside of a <form> that POSTs to a view, which will then delete the instance. For example:
html
<form action="{% url 'delete_estate %}" method="POST">
{% csrf_token %}
<input type="hidden" name="estate_id" value="{{ estate.id }}">
</form>
view
def delete_estate(request):
if request.method == "POST":
estate_id = request.POST['estate_id']
estate = Estate.objects.get(id=estate_id)
estate.delete()
messages.success(request, "Estate deleted successfully!")
return redirect("/")
urls
...
url(r'^delete-estate/$', views.delete_estate.as_view(), name='delete_estate'),
....
Put the modal inside of the for loop as well so that there is a distinct modal for every estate. Remember to change the id of the modal to something like id="delete_{{ anuncio.id }}" and have the delete button activate that same modal using data-target="delete_{{ anuncio.id }}". From within that modal you should be able to do what Hybrid said with the form and access the {{ anuncio.id }} variable.
If you didn't already know, id is already created by default.