I have a table with lots of job data, and I have a dropdown menu and a submit button, which acts as a filter, so that the table only displays jobs based on the filter:
<form>
<select id="user_id_dropdown" name="user_id">
<option disabled selected>Filter by Username</option>
<option value="all">All Usernames</option>
<option disabled>────────────</option>
{% for user in users %}
<option value={{ user.id }}>{{ user.username }}</option>
{% endfor %}
</select>
<input id="filter" class="btn btn-primary" type="submit" value="Filter" />
</form>
<table>
...
How I've done it with the button is such that the user_id of the username is passed as a query string and my view handles it. Upon selecting a username (say it's user_id is 4) and clicking the submit button, the url is:
http://...jobs?user_id=4
Then I have a table below where all the jobs displayed are now only those created by user_id 4.
The thing is, now I just want to do away with the submit button and just submit the form on dropdown selection.
I've tried to give the form a name and to submit when there is a change on selection:
<form name='filter' method=POST>
<select id="user_id_dropdown" name="user_id" onChange="filter.submit();">
...
But this doesn't seem to work. It does seem like the page reloads (similar to the submit button), but the table data doesn't change. What am I missing out here?
I tried this:
onChange="form.submit();"
and it worked. Seems the name is not necessary.
Try putting this on your onchange attr:
document.filter.submit();
If this fails, give your form an ID attribute and do:
document.getElementById('youFormId').submit();
You could also send it as a GET paramenter like:
onchange="window.locatio.href+='?v='+this.value;"
By the way this question has little relation with Django, you should tag it html/javascript next time you ask about this kind of stuff.
Related
I use django-forms-dynamic package and htmx to dynamically load available options on a MultipleChoiceField. The options are based on a date field, for which I use pickadate.js by Amsul.
The initial query gets the correct choices from the database. However, if the date is changed, the query is lagging one step behind. So, let's asume 1.11.2022 is initially selected. If changed to 4.11.2022, the query is made for the 1.11.2022. If 28.11.2022 is selected, 1.11.2022 is queried, etc.
reservation_form.html
<div class="col-lg-6">
<div class="form-floating">
{% render_field reservation_form.date class="datepicker form-control mb-3"
hx-get="/reservation/filter-seats"
hx-include="#id_dinner"
hx-trigger="click change"
hx-target="#id_seat_reservation"
%}
<label for="id_date">Dinner Date</label>
</div>
<div class="form-floating">
{% render_field reservation_form.amount_guests class+="form-control" placeholder="" %}
<label for="id_amount_guests">Guests</label>
</div>
<div class="visually-hidden">
{% render_field reservation_form.dinner %}
</div>
<div class="form-check">
{% render_field reservation_form.seat_reservation class+="form-select" %}
<label for="id_seat_reservation">Select Seats</label>
</div>
</div>
pickadate script
<script>
var $input = $('.datepicker').pickadate({
format: 'yyyy-mm-dd',
formatSubmit: 'yyyy-mm-dd',
min: 0,
max: 90,
disable: {{ blocked_dates }},
firstDay: 1,
})
var picker = $input.pickadate('picker')
</script>
What am I missing?
You have set the triggers as hx-trigger="click change". First, this is incorrect, you have to separate events with a comma, right now HTMX tries to evaluate change as a trigger modifier without success. Therefore you only have the click trigger event, HTMX submits the form when you click on the input element. At the same time pickadate.js also listens to the click event and opens the datepicker widget. After selecting a date the form dispatches the change event, but you have disabled that for HTMX so it will not submit the form again. Next time you click on the input element HTMX submits the form with the previously selected value.
To fix the issue just remove the hx-trigger attribute. For input fields the default trigger is already the change event, therefore HTMX will submit the form when pickadate.js enters the selected date into the input field.
I was trying to make a cart system in Django and wanted to pass Size and the Quantity of product as <Select>
input in View.
My Template have :
<ul class="list-unstyled">
Select Size:
<select name="sizes">
{% for size in product.sizes.all %}
<li class="list-item list-inline-item"><option value="{{size.nameSize}}">{{size.nameSize}}</option> </li>
{% endfor %}
</select>
</ul>
This is how it looks :
But when i Submit it using the Add to Cart Button i get error:
This is the code in the view:
def add_item(request,pk):
product = get_object_or_404(Product,pk=pk)
size = request.POST['sizes']
selectsize = Size.objects.get(nameSize=size)
user = request.user
usercart = Cart.objects.get(owner=user)
newitem = CartItems.objects.create(cart = usercart,product=product,size=selectsize)
items = usercart.cartitems
return render(request,'cart.html',{'cartitems':items})
I am trying to use the name of the size from the Template and compare the size name i have in the database for that product Using:
selectsize = Size.objects.get(nameSize=size)
I was able to get size with name 36 so i wanted to pass the value 36 from the template to the variable size using post.
But i get the error mentioned which i believe is because name for the <select> is common in all the <option>.
If i can either get an alternate way to do that or solve this error both type of solutions are welcomed.
*I am not using Django Forms because i don't know how to have django form display like i am displaying my products in cart and on the product page.
ANSWER
I was missing a submit button and was rather using a <a href="{% url 'add_item' product.pk %}>Add To Cart</a>" to submit the form which was not working.
Now i replaced it with <button class="btn btn-success" style="margin-top: 10px;" type="submit">Add To Cart New</button>
And the form Action is given the link i was trying to go to.
<form method="post" enctype="multipart/form-data" action="{% url 'add_item' product.pk %}">
A silly mistake on my side.
Thanks for the answers.
Expanding on what #Yevhenii M. said, and talking particularly about the MultiValueDictKeyError:
This error happens when the given key (sizes in this case) is not found in the POST dict. This might be happening (i'm only guessing, since you didn't post the full html code), because you didn't put the corresponding <form> tag surrounding the select.
So, the final code would look something like:
<form action="url-to-send-form-data" method="POST">
{% csrf_token %}
<select name="sizes">
{% for size in product.sizes.all %}
<option value="{{size.nameSize}}">{{size.nameSize}}</option>
{% endfor %}
</select>
</form>
The {% csrf_token %} is needed in order to protect you against Cross Site Request Forgery attacks (more info: https://docs.djangoproject.com/en/2.2/ref/csrf/)
EDIT: Now that I take a closer look, the error message shows that the url is being called with a GET request (maybe because of trying to access to /item_added/1 straight from the browser's url). That is why django can't find the sizes key.
One common way to call the url via post, is as shown in the code snipet above, and adding a submit button to the html:
...
<button type="submit">Submit</button>
</form>
You don't need to use <ul> tag here.
You can write:
Select Size:
<select name="sizes">
{% for size in product.sizes.all %}
<option value="{{size.nameSize}}">{{size.nameSize}}</option>
{% endfor %}
</select>
and result will be the same.
Since you didn't specify that add_item(request, pk) works only by POST, then you can't expect that request.POST always will be presented.
Better write your code as this:
if request.POST:
# do something
And if you don't specify default value for your select in template, then sizeswill not be in your request.POST.
You can write like this just to be sure that you got some value:
request.POST.get('sizes', 'some_default_value')
Just because you get MultiValueDictKeyError you need to see what you get in request. Maybe you get QueryDict, then you need to extract first value. For example, see this SO question. For example, print your request.POST or check type.
I am building a new order form and there are few dropdowns on my HTML page. I would like to build a number based on the dropdown selection. Below is the select tag code which displays the values from the database.
<div class="col-md-4 mb-5">
<select class="selectpicker show-tick" data-width="fit" id="test" data-header="Choose Cost Type Description" title="Choose Cost Type Description">
{% for row in odrrows %}
<option name="costtypedesc" value = "{{ row.odr_cost}}">{{ row.odr_cost_desc}}</option>
{% endfor %}
<select>
</div>
Is there a way fetch row.odr_cost value to same page instead of row.odr_cost_desc that too without submit? I know we can fetch the row.odr_cost_desc value using javascript but not sure about row.odr_cost.
Here is the sample table1
My dropdown displays drinks, liquids and XYZ. When users selects drinks, I would like to display number 52 in the same webpage(maybe with p tag) instead of drinks.
I have a django template which has multiple <a> tags.
<a class="label label-success" href="get_status/?token={{book.token}}">Update</a>
On click of it, a method from views is called where I can access the token from the url as
tkn = request.GET.get('token')
But now I want not to send the token in the url.
I searched for this and get to know about forms but I did not clearly understand them. Can anyone please help here.
For future ref: I created a form and added a hidden input field in it.
on click of submit button it will send the token value.
<form action="get_Status/" method="post">
{% csrf_token %}
{{ form }}
<input type="hidden" name="book_token" value="{{book.token}}">
<input type="submit" class="submit_btn btn label-success" value="Update" />
</form>
Ans in the views.py
book_token=request.POST.get("book_token"," ")
You can use the basic HTML form concept here.
Please check the link:
How to submit a form with JavaScript by clicking a link?
Use javascript/Jquery to submit the form.
Insert the token value in a hidden field and use form to submit it to views.
Then in the views,you can get the value as :request.POST['token']
I am outputting data from a query to an html table for representation. On the Right corner of the table I have an "Update" button and a "Delete" button.
What I am trying to do is:
When I press on the update button a modal opens. Inside that modal I have a form which I want to have predefined the values from the current row and be able to edit the specific row
When I press the delete button on a row I want that row to be deleted and reload the page
This is my html table, the last two columns on the right are the buttons
**Survey Name** **Category** **Weight** **Update** **Delete**
Consultation Ambiance 20 Update Delete
Consultation Consultation 40 Update Delete
Consultation Follow Up 40 Update Delete
This is my first query which generates the table
<cfquery name="categories" datasource="#dsn#">
select s.name, s.id as surveyid, rc.categoryname, rc.id as categoryid, sc.cweight
from survey_categories sc
join surveys s on s.id = sc.surveyidfk
join rating_categories rc on rc.id = sc.categoryidfk
where sc.surveyidfk='#form.survey#'
</cfquery>
This is the form I am accessing when I press "Update"
This form has an extra cfloop around the select tag to get the rest of the categories that I have in the database in case the user needs to change the category.
So, for example if I pressed the update button on the second row on my table this form should have Consultation in the drop down menu and the number 40 on the bottom textbox
A small note that may help, the first query that outputs the table also output a unique id with the pair (id, surveyName, Category, Weight). So the update query in the end would be something like
update categories set category='Example', weight='30'
where id='345'
I don't know how much this can help.
<cfoutput>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="myModalLabel">Update</h3>
</div>
<div class="modal-body">
<form name="update" action="updateSCpair.cfm" method="post">
<input type="text" value="#categories.name#" class="input-xlarge" disabled> <br />
<select name="categories">
<cfloop query="ratingCat">
<option value="#ratingCat.id#" >#ratingCat.categoryName#</option>
</cfloop>
</select>
<br />
<input class="span3" type="number" placeholder="Enter Category Weight" required >
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</form>
</div>
</cfoutput>
UPDATE
TO make it more clear because I think I wrote too much. I need to call a modal on form submittion. I will need to replace my current buttons with a form and then pass all the data through hidden variables. The problem is that this is not working for me. I found another example here but it doesn't seem to work. EXAMPLE
I think the simplest way is to have two forms at the end of each row. You already have the buttons. The rest can be hidden fields.
Your update form would have a target attribute to launch your popup. Since you already have the values from your query, you just submit them to the popup as hidden fields.
Your delete form would submit to the current coldfusion page. At the start of the page, you would have something like this:
<cfif StructKeyExists(form, "DeleteMeOrSomethingLikeThat")>
code to delete record
</cfif>
This will get you started. If you want to improve it later on, you can.
Finally, do one thing at a time.