I have the below List in Python.
list_val = ['APPROVED','UN-APPROVED','DEACTIVATE']
and need to pass this list values into a Check box with Jinja Template.
Can someone help on this with HTML code embedded with Jinja template ?
Expected Output:-
HTML Need to converted with JINJA Template.
<input type="checkbox" id="val1" name="val1" value="app">
<label for="val1"> APPROVED</label><br>
<input type="checkbox" id="val2" name="val2" value="unapp">
<label for="val2"> UN-APPROVED</label><br>
<input type="checkbox" id="val3" name="val3" value="deac">
<label for="val3"> DEACTIVATE</label>
Try this code
This code will have input tags with values like approved, un-approved, deacitvate instead of app, unapp, deac. Is that okay for you?
And also its better to put the input tag inside the label tag, because when you click the word beside the checkbox, it'll toggle the checkbox (and thats why labels are mostly used for)
As W3schools says:
Proper use of labels with the elements above will benefit:
Screen reader users (will read out loud the label, when the user is focused on the element)
Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area).
Tip: The for attribute of <label> must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label> element.
{% for i in range(list_val_len) %}
<label for="val{{ i+1 }}" name="val{{ i+1 }}">
<input type="checkbox" id="val{{ i+1 }}" name="val{{ i+1 }}" value="{{ list_val[i].lower() }}">
{{ list_val[i] }}
</label><br>
{% endfor %}
And also pass the list_val list and its length in seperate keyword arguments on the render_template function like
list_val = ['APPROVED','UN-APPROVED','DEACTIVATE']
#app.route('whatever_route_in_here')
def whatever_name_your_function_has():
...
...
render_template('html_file_name.html', list_val=list_val, list_val_len=len(list_val))
Tell me if its not working...
Related
I have changed the button from checkbox to radio
I am using checkbox in this way:
<input type="radio"name="group1"value="0">
<input type="radio"name="group1"value="1">
<input type="radio"name="group1"value="2">
<input type="radio"name="group1"value="3">
in my view.py
boxes = request.POST.getlist("group1")
Which the boxes is an empty array. I have also tried:
boxes = requset.POST.getlist("group1", [])
boxes = request.POST.getlist("group1[]")
boxes = request.POST("group1") <-- I have seen from other post said
this would only return the value
the value of last element but I am also okay as the
box will only have one box clicked
however, all of the above cannot successfully get the checkbox value.
Now I have found the problem since i am doing this way:
<form id="submit_form" method="POST">{% csrf_token %}</form>
<div form="submit_form">
<input type="radio"name="group1"value="0">
<input type="radio"name="group1"value="1">
<input type="radio"name="group1"value="2">
<input type="radio"name="group1"value="3">
</div>
So it doesn't work.
I need to change it to
<input form="submit_form" type="radio"name="group1"value="0">
<input form="submit_form" type="radio"name="group1"value="1">
<input form="submit_form" type="radio"name="group1"value="2">
<input form="submit_form" type="radio"name="group1"value="3">
But is there a better way to do it?
I am building an app using Flask to show nearby shops, and the user can like a shop so it can be added to their liked shops list.
My question is how can i get the value inside the <h4> tag sent to Python knowing that the name attribute is a variable. The html code is below:
<form name='likeF' method='POST' action ='{{url_for("liked")}}'>
<h4 name="ShopName_{{loop.index}}">{{item.ShopName}}</h4>
<p>
Shop Description : {{item.ShopDesc}} <br>
<button type="submit" class="success button like">Like</button>
distance: {{item.ShopDistance}}
</p>
</form>
So please how am I supposed to get back the value of {{item.ShopName}}?
You can't send the text inside an <h4> tag (or any tag that is not a form input) back to the server, at least not without using Javascript. The easiest method would be to duplicate it in a hidden input element inside the form, such as:
<input type="hidden" name="ShopName" value="{{ item.ShopName }}">
Then you can access it using request.form["ShopName"].
Lets say I have 2 radio buttons in my html script, of which one is checked by default:
<form action="" method="post">
<div class="radio-option checked">
<input type="radio" name="radioName" value="val_1"/>
</div>
<div class="radio-option">
<input type="radio" name="radioName" value="val_2"/>
</div>
<div>
<input type="submit" value="Confirm and continue"/>
</div>
</form>
If I click the submit button without clicking the other radio button, I get an error:
Bad Request The browser (or proxy) sent a request that this server
could not understand.
This happens because there is no value which is being transfered if a radio button is checked by default but not being selected with the mouse afterwards! This is what request.form shows me ImmutableMultiDict([]). If I select the other radio button with the mouse and click the submit button it shows me values ImmutableMultiDict(['radioName', 'val_2'])
I tried to catch the error like this, but it didn't work out:
if request.form == '':
flash('error')
return render_template('default_template.html')
How can I handle this within flask?
How can I set a default value, which can be sent to the server?
You could perform a check within flask. Check if request.form has items or if its empty and throw the error in that case.
A simple way of knowing if its empty would be, for example:
if len(request.form) == 0:
print('Error: The form is empty')
else:
print('The form has data, we can proceed')
Another way is:
if 'radioName' not in request.form:
print('Error: The form is empty')
...
But maybe flask has a better way of doing this or there are better practices to follow in these cases.
On the other hand, in the html snippet that you posted, none of the inputs is checked by default.
You have the checked css class on a div but not the checked attribute in an input with type=radio.
The correct use of checked attribute would be as follows:
<form action="" method="post">
<div class="radio-option checked">
<input type="radio" name="radioName" value="val_1" checked/>
</div>
<div class="radio-option">
<input type="radio" name="radioName" value="val_2"/>
</div>
<div>
<input type="submit" value="Confirm and continue"/>
</div>
</form>
This way, the radio input with value val_1, will be checked by default, populating the dictionary that goes to the server.
For more information, check out: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
You can also avoid sending empty forms to the server using the required attribute to make sure that the user fills the form as expected.
To learn more about this: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation
I hope it helps!
I'm using Python/Flask WTForms version 2.1 with Boostrap 3 CSS and I can't find a solution to this problem:
In the Python form generation code code I have this form element
searchtype = RadioField("Search type:", choices=[('any', 'Any names'), ('all', 'All names')])
and in the Flask template I have
<!-- radiobutton for search type -->
{{form.searchtype.label}}{{form.searchtype(class_="list-inline")}}
he radio buttons are correctly generated inline by "list-inline" but there is a line break after the label element which I would like to remove. However, I can't find any classes or styles to add to form.searchtype.label or form.searchtype which will make the radio buttons run on on the same line after the element.
The generated HTML:
<label for="searchtype">Search type:</label>
<ul class="list-inline" id="searchtype">
<li><input id="searchtype-0" name="searchtype" type="radio" value="any">
<label for="searchtype-0">Any names</label></li>
<li><input id="searchtype-1" name="searchtype" type="radio" value="all">
<label for="searchtype-1">All names</label></li></ul>
Thanks in advance
I'm using Bootstrap with Flask Python.
request.form.get("name")
#name is the name of the form element(checkbox)
<label class="btn btn-danger pzt active">
<input type="checkbox" name="name" value="1" data-id="0"> Check
</label>
When checkbox is checked, parent label has class "active", I want to get if checked box is checked. Is there any way or methods?
you can try the following:
HTML:
<div class="checkbox">
<label>
<input type="checkbox" name="check" value="edit"> New entry
</label>
</div>
In flask:
value = request.form.getlist('check')
This will give you the value of the the checkbox. Here value will be a list.
value = [u'edit']
You can also get value of multiple checkboxes with same name attribute.
I'm not familiar with Flask, but I do know how HTTP works.
If you want to know if its checked on the server side, just check if that form field exists, if request.form.get("name") gives you NULL or exception, then the checkbox should be unchecked.
If you want to know it on the client side with javascript, you can use jQuery (as jQuery is a base component of Bootstrap) as $('xxxx').is(':checked') (replace xxxx with a valid selector).