I want to pass the value in the comment text area when the a tag is clicked.Is there any other methods to pass both the comment and rating into the get method.I saw some similar questions but the answers where suggesting to use hidden input field to pass the value.But in my case i want the rating number in the clicked tag too.so i won't be able to use the hidden input method.
<form method='post'>
<div class="container-fluid py-4">
<div class="row">
<div class="col-lg-6 mx-auto mb-lg-0 mb-4">
<div class="card">
<div class="card-body p-4">
<h4 class="font-weight-bolder">Review</h4><br>
<div >
<textarea class="textarea p-3 w-100" placeholder="Write a review" cols = "40" rows="5"></textarea>
{{form.comment}}
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid py-4">
<div class="row">
<div class="col-lg-6 mx-auto mb-lg-0 mb-4">
<div class="card">
<div class="card-body p-4">
<h4 class="font-weight-bolder">Rating</h4><br>
<div class="rating rating2">
★
★
★
★
<a href="{% url 'ratings' 1 id %}" title="Give 1 star" data-value="1" type="submit">★
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Related
I'm trying to implement a "Count No. of Entries" and "Filtering" functionality to my List.js list, like in this example: Codepen. But in this implementation the list item data is part of the JS file itself and not of the HTML (what I would like to have). So I'm having problems "translating" this JS code for my list. What would I need to write in the JS file? Cf. Codepen Could you please help? 🙏
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Total Number:<span class="count"></span></p>
</div>
</div>
</div>
<div id="users">
<div class="container">
<div class="row">
<div class="col-md-12">
<input class="search form-control" placeholder="Search" />
<button class="sort btn btn-primary" data-sort="name">
Sort by name
</button>
<button class="sort btn btn-primary" data-sort="title">
Sort by title
</button>
<div class="tags">
<div>Filter by:</div>
<div class="tag filter" data-filter="Baseball">Baseball </div>
<div class="tag filter" data-filter="Kitties">Kitties </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group list">
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Alex</h4>
<p class="list-group-item-text title">Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Baseball</span>
</p>
</div>
</div>
<div class="clearfix"></div>
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Dennis</h4>
<p class="list-group-item-text title">Super Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Kitties</span>
</p>
</div>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>
</div>
</div>
'''
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 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
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:
This question is similar to one I asked earlier, but this time I am trying to achieve the layout using a different approach: grids, not block-grids.
I read ZURB's article on How to bridge rows in Foundation, but the end result deviates from my expectation. There is no margin between the first and the second row. So how do I get that margin to work, that you see in the picture at the article?
This is what I got so far: http://jsfiddle.net/NPUHy/
First approach
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 column">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-8 column">
<div class="row">
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-1"/>
</div>
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-1"/>
</div>
</div>
<div class="row">
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>
Second Approach
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 columns">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>
add a class to the row div<div class="row custom">, and then add a padding to the class
.row .custom {
padding-bottom: 10px;
}
updated fiddle http://jsfiddle.net/NPUHy/1/