Django - handle two form elements for the same model in one template - django

I am using the following UpdateView in order to alter some values in the database:
class MyUpdateView(UpdateView):
model = MyModel
fields = ['VideoURL', 'MainDescription']
template_name = 'myapp/edit.html'
This is my template:
<div class="row">
<div class="col-12 col-lg-7">
<form method='post' class="card shadow-soft border p-4 mb-4">
{% csrf_token %}
<h5 class="mb-4">General</h5>
<div class="form-group">
<label for="MainDescription">Title</label>
{{form.MainDescription|add_class:"form-control shadow-soft"}}
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-dark mt-2 animate-up-2"
type="submit">Update</button>
</div>
</div>
</form>
</div>
<div class="col-12 col-lg-5">
<form method='post' class="card shadow-soft border p-4 mb-4">
{% csrf_token %}
<div class="form-group">
<label for="VideoURL">Video URL:</label>
{{form.VideoURL|add_class:"form-control shadow-soft"}}
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-dark mt-2 animate-up-2 text-right"
type="submit">Update</button>
</div>
</div>
</form>
</div>
</div>
However, I am facing some difficulties doing so because although both fields belongs to the same model, I cannot update any of the information. What I have noticed though is that if I place the both fields under the same HTML form, it works:
<div class="col-12 col-lg-5">
<form method='post' class="card shadow-soft border p-4 mb-4">
{% csrf_token %}
<div class="form-group">
<label for="VideoURL">Video URL:</label>
{{form.VideoURL|add_class:"form-control shadow-soft"}}
</div>
<div class="form-group">
<label for="MainDescription">Main Description:</label>
{{form.MainDescription|add_class:"form-control shadow-soft"}}
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary btn-dark mt-2 animate-up-2 text-right"
type="submit">Update</button>
</div>
</div>
</form>
</div>
What am I missing here? Can anyone give me a hint? Thanks
Edit
It's due to how the forms are being displayed in the HTML form. They should be independent:

Related

Django - I want to display current rate depending on the category i select

here is my front-end and everything is working fine however, i don't want all rate to display at once, i want the rate to display one at a time depending on the card category i select.
From the image i uploaded, current rate of other card category are showing which i don't want, please i need help even if it will require using javascript of ajax
Here is my index(template)
{% for giftcard in giftcards %}
<!-- Card -->
<div class="col-lg-4 gift__card col-6 p-0">
<a type="button" class="btn">
<img class="img-fluid gift__card-img" src="{{ giftcard.card_image.url }}">
</a>
<div class="container d-flex align-items-center justify-content-center">
<div class="gift__card-modal-container py-5">
<div class="card__container">
<div class="gift__card-overlay"></div>
<div class="container-fluid bg-light gift__card-modal shadow-lg">
<div class="pop p-5">
<div class="row d-flex align-items-center justify-content-between">
<div class="col-lg-5 col-12 p-0 m-0">
<img class="img-fluid gift__card-img" style="width: 40rem;" src="{{ giftcard.card_image.url }}">
<p class="text-muted">Select the card category and the amount.</p>
</div>
<div class="col-lg-6 col-sm-12 card-details">
<form class="card-form">
<div class="form-group py-2">
<label for="card-category">Card category</label>
<select id="category" class="form-select py-2" aria-label="Default select example">
{% for spec in giftcard.category_set.all %}
<option value="{{ spec.category }}">{{ spec.category }}</option>
{% endfor %}
</select>
</div>
<div class="form-group py-2">
<label for="Amount">Amount</label>
<div class="d-flex align-items-center amount">
<input type="text" class="form-control" id="amount"
placeholder="Please enter amount">
<span class="">#100,000</span>
</div>
</div>
<div class="form-group py-3">
{% for spec in giftcard.category_set.all %}
<label for="rate">Current rate - {{ spec.rate }}</label>
{% endfor %}
</div>
<div class="border-none pt-2 pl-3 d-flex justify-content-end">
<button type="button" class="btn process-card-btn">Proceed</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="gift__terms-card hide fade" id="terms" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content terms">
<div class="p-5">
<h4 class="terms-title pb-4">Trading terms</h4>
{% for spec in giftcard.category_set.all %}
<p class="pb-2">{{ spec.terms }}</p>
{% endfor %}
<div class="border-none pt-3 pl-3 d-flex justify-content-end">
<button type="button" class="btn process-card-btn">Proceed</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
Here is my models
class Giftcard(models.Model):
name = models.CharField(max_length=100, unique=True)
card_image = models.ImageField(upload_to='Giftcard/', blank=False)
date = models.DateTimeField(auto_now_add=True)
publish = models.BooleanField(default=False)
class Category(models.Model):
category = models.CharField(max_length=250)
rate = models.IntegerField()
terms = models.TextField()
card_category = models.ForeignKey(Giftcard, on_delete=models.CASCADE)
Here is my views
def giftcard(request):
giftcards = Giftcard.objects.filter(publish=True)
context = {
'giftcards': giftcards
}
return render(request, 'dashboard/giftcard.html', context)

How is it possible to get data from one form that has multiple textareas in Django

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')

How can I remove a particular item using a popup?

I have many items and I want to delete one of them but when I delete one item it turns out that it deletes the last item which exists based on ordering so, if I have 10 records of id which start from 1 to 10 record so, it will remove the item number 10 til if I remove item number 5 will remove the number 10. this case occurs because of popup but if I remove popup and delete the items directly it will remove with no mistake so, How can I remove a particular item using popup?
profile.html
{% if request.user == profile.user %}
<div class="col-lg-7 offset-lg-1 col-12">
{% if profile.user.user_history.all.count != 0 %}
<form method="post">
{% csrf_token %}
<div class="clear_all fl-left">
<input class="global_checkbox" type="checkbox" name="remove_all_history" id="remove_all_history">
<label for="remove_all_history" class="ml">Remove All</label>
</div>
<div class="fl-right">
<input type="submit" value="Remove" class="clear_button btn btn-danger invisible"/>
</div>
</form>
{% else %}
<p class="text-center">you have no history yet!</p>
{% endif %}
<div class="clearfix"></div>
<div class="mt-6"></div>
{% for history in history_pages %}
{% if history.deleted_history == False %}
<div class="history">
<div class="row">
<div class="col-4">
<form method="post">
{% csrf_token %}
<input class="global_checkbox" type="checkbox" name="remove_one_history" id="remove_all_history">
<span class="ml-2">{{ history.history_time|time }}</span>
<div class="ml ml-4">{{ history.history_time|date:'d M Y' }}</div>
</form>
</div>
<div class="history-content col-7">
<p><strong>text:</strong> {{ history.history }}</p>
<p><strong>action:</strong> {{ history.action_option }}</p>
<p><strong>position:</strong>
{% if history.verb_option == "" %}
POS
{% else %}
{{ history.verb_option }}
{% endif %}
</p>
</div>
<form method="post" action="{% url 'accounts:remove_history' history.id %}">
{% csrf_token %}
<div class="history-list col-1">
<span class="fa fa-ellipsis-v" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu">
<a type="button" class="dropdown-item" data-toggle="modal" data-target="#exampleModal">Remove this item</a>
</div>
</div>
{% include 'accounts/popup.html' %}
</form>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
popup.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">Warning!!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you want to remove this history item?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-outline-danger">Remove</button>
</div>
</div>
</div>
</div>
views.py
#login_required
def userProfile(request, slug=None):
profile = None
try:
profile = Profile.objects.get(user__slug=slug)
paginator = Paginator(profile.user.user_history.all(), 100)
page_number = request.GET.get('page_number')
history_pages = paginator.get_page(page_number)
except:
return redirect('accounts:index_404')
return render(request, 'accounts/profile.html', {'profile': profile, 'history_pages': history_pages})
def remove_history(request, id=None):
if id and id is not None:
# History.objects.get(id=id)
print(id)
return redirect("accounts:profile", request.user.username)
Note: I tested the delete using print(id)
In your current code you have included popup.html mutliple times so when you click on a tag its not confirm which modal will get open has all are triggering exampleModal i.e :data-target="#exampleModal" .
So , to overcome this one way would be including only one modal and adding form tags around submit button . Then , whenever user click on a tag you can get action value from form where a tag has been clicked and then add this action value inside modal form tag .
Demo Code :
//on click of `a` tag
$(".dropdown-item").on("click", function() {
//get closest form from `a` tag then get action from it
var action_ = $(this).closest("form").attr("action");
$("#exampleModal form").attr("action", action_) //add that action inside modal form tag
console.log(action_)
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="history">
<div class="">
<div class="">
<form method="post">
{% csrf_token %}
<input class="global_checkbox" type="checkbox" name="remove_one_history" id="remove_all_history">
<span class="">12:30</span>
<div class="">12-04-21</div>
</form>
</div>
<div class="history-content">
<p><strong>text:</strong> Somethigs</p>
<p><strong>action:</strong>Ok</p>
<p><strong>position:</strong> POS
</p>
</div>
<form method="post" action="{% url 'accounts:remove_history' 1 %}">
<div class="history-list">
<span class="fa fa-ellipsis-v" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu">
<a type="button" class="dropdown-item" data-toggle="modal" data-target="#exampleModal">Remove this item</a>
</div>
</div>
<!--remove this line {% include 'accounts/popup.html' %}-->
</form>
</div>
</div>
<div class="history">
<div class="">
<div class="">
<form method="post">
{% csrf_token %}
<input class="global_checkbox" type="checkbox" name="remove_one_history" id="remove_all_history">
<span class="">12:32</span>
<div class="">22-04-21</div>
</form>
</div>
<div class="history-content">
<p><strong>text:</strong> Somethigs2</p>
<p><strong>action:</strong>Ok2</p>
<p><strong>position:</strong> POS
</p>
</div>
<form method="post" action="{% url 'accounts:remove_history' 2 %}">
<div class="history-list">
<span class="fa fa-ellipsis-v" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
<div class="dropdown-menu">
<a type="button" class="dropdown-item" data-toggle="modal" data-target="#exampleModal">Remove this item</a>
</div>
</div>
<!--remove this line {% include 'accounts/popup.html' %}-->
</form>
</div>
</div>
<!--just use only one modal no need to include it every time on your page-->
<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">Warning!!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--added form tag-->
<form method="post" action="">
<!--added csrf token-->
{% csrf_token %}
<div class="modal-body">
Do you want to remove this history item?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-outline-danger">Remove</button>
</div>
</form>
</div>
</div>
</div>

IntegrityError in database stored vlaues in django?

'''
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.

Only the first form in Django forloop submitting data. The other forms submit empty fields

I am facing a situation whereby only the first form in the forloop in the code below can submit data. The rest of the forms after the first forloop posts empty data. What could be the problem. I believe my views is good since it's able to process the data from the first form. I believe the problem should be in the code below only that i cannot figure where the issue is
When i hit submit button on the subsequent form i get the following in the shell
[12/Mar/2020 12:07:17] "POST /hotels/conference/cart/twiga-boardroom-3/ HTTP/1.1" 302 0
[12/Mar/2020 12:07:18] "GET /hotels/conference/panari-hotel HTTP/1.1" 200 34389
HTML CODE
{% for item in object.conferenceroom_set.all %}
<div class="room-item">
<div class="row gap-20">
<div class="col-12 col-sm-12 col-md-6">
<div class="row gap-20">
<div class="col-12 col-sm-4 col-md-4">
<div class="image">
<img src="{{ item.room_photo.url }}" alt="{{ item.object.name }}" />
</div>
<p></p>
{% if user.is_authenticated and item.user == user %}
Edit
Delete
{% endif %}
</div>
<div class="col-12 col-sm-12 col-md-8">
<div class="content">
<h5>{{ item.room_Name }}</h5>
<p>{% for list in item.features_as_list %}
<span class="icon-font"><i class="fas fa-check-circle text-primary"></i> {{ list }} </br></span> {% endfor %}</p>
<p class="max-man">Max. Guests : <span class="badge badge-primary">{{ item.room_Capacity }}</span>
<p class="price"><span class="number text-secondary"><small>Ksh</small>{{ item.room_Price|intcomma }}</span> per guest</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6" >
<div class="row gap-20 justify-content-between">
<form method="POST" action="{% url 'conference-update-booking-2' item.slug %}" class='pull-right'>
<div id="airDatepickerRange-general" class="col-12 col-sm-8 col-md-8">
<div class="form-group">
<label class="line12 font13 spacing-05 mt-5 mb-10 block">Check-in</label>
<div class="form-icon-left">
<span class="icon-font text-muted"><i class="bx bx-calendar"></i></span>
<input type="text" name='checkin'id="dateStart-general" class="form-control form-readonly-control" placeholder="dd/mm/yyyy">
</div>
</div>
<div class="form-group">
<label class="line12 font13 spacing-05 mt-5 mb-10 block">Check-out</label>
<div class="form-icon-left">
<span class="icon-font text-muted"><i class="bx bx-calendar"></i></span>
<input type="text" name='checkout' id="dateEnd-general" class="form-control form-readonly-control" placeholder="dd/mm/yyyy">
</div>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4">
<div class="form-group form-spin-group mb-5">
<label class="line12 font13 spacing-05 mt-5 mb-10 block">Attendants</label>
<div class="form-icon-left">
<span class="icon-font"><i class="dripicons-user text-muted"></i></span>
<input name='qty' class="form-control touch-spin-03 form-readonly-control" value="1" readonly/>
</div>
<label class="line12 font13 spacing-05 mt-5 mb-10 block">Reserve</label>
<label class="line12 font13 spacing-05 mt-5 mb-10 block"></label>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-sm btn-block" data-toggle="modal" data-target="#exampleModal2">
Book
</button>
<!-- Modal -->
<div class="modal" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">Book Accomodation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-12" style="padding-left:0px">
<input type="checkbox" id="myCheck" onclick="myFunction()"> Do you also wish to book rooms for your guests' stay?
<p></p>
<p></p>
<p></p>
</div>
<div class="row" id="text" style="display:none">
<div class="row gap-20 gap-lg-30 mb-20">
<div class="col-8">
<div class="form-group mb-0" style="padding-left:15px">
<select class="custom-select custom-select-md" name="single_hotel_room">
<option selected="" disabled>Select Single room</option>
{% for room in object.room_set.all %}
<option>{{ room.id}}-{{ room.room_Type}}#{{ room.room_Price}}</option>
{%endfor %}
</select>
</div>
</div>
<div class="col-4">
<div class="form-group mb-10" style="padding-right:15px">
<div class="form-icon-left">
<span class="icon-font"><i class="dripicons-user text-muted"></i></span>
<input name='single-guests' class="form-control touch-spin-03 form-readonly-control" value=""/>
</div><label class="line12 font13 spacing-05 mt-5 mb-10 block">Guests</label>
</div>
</div>
</div>
<div class="row gap-20 gap-lg-30 mb-20">
<div class="col-8">
<div class="form-group mb-0" style="padding-left:15px">
<select class="custom-select custom-select-md" name="double_hotel_room">
<option selected="" disabled>Select Double room</option>
{% for room in object.room_set.all %}
<option>{{ room.id}}-{{ room.room_Type}}#{{ room.room_Price}}</option>
{%endfor %}
</select>
</div>
</div>
<div class="col-4">
<div class="form-group mb-10" style="padding-right:15px">
<div class="form-icon-left">
<span class="icon-font"><i class="dripicons-user text-muted"></i></span>
<input name='double-guests' class="form-control touch-spin-03 form-readonly-control" value=""/>
</div><label class="line12 font13 spacing-05 mt-5 mb-10 block">Guests</label>
</div>
</div>
</div>
<div class="row gap-20 gap-lg-30 mb-20">
<div class="col-8">
<div class="form-group mb-0" style="padding-left:15px">
<input type="date" id="checkindate" name="checkindate" class="form-control form-readonly-control">
<label class="line12 font13 spacing-05 mt-5 mb-10 block">CheckIn Date</label>
</div>
</div>
<div class="col-4">
<div class="form-group mb-10" style="padding-right:15px">
<div class="form-icon-left">
<span class="icon-font"><i class="dripicons-user text-muted"></i></span>
<input name='nights' class="form-control touch-spin-03 form-readonly-control" value=""/>
</div><label class="line12 font13 spacing-05 mt-5 mb-10 block">Nights</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-sm btn-block">Continue</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% csrf_token %}
</form>
{% endfor %}```
I want to answer this question myself so that if there will be any newbie who will face this problem will get a solution here. Only the first form in the forloopwould submit or post data because i was using the same name for the modal div id tag. I modified my code above by generating unique modal div id. To do this i added {{forloop.counter}} to id="exampleModalLabel. This ensured that every autogenerated modal would be generated with unique div id tag. I hope this helps someone. Thanks