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).
Related
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...
<form action="/" method="post">
<button class="btn btn-outline-primary btn-sm" type="submit" name="submit_btn" value="favorites" data-
value="{{[i]}}">Favorites</button>
</form>
I have this button in Html, I want to obtain the variable "i" which is contained in the "data-value", to use it in Python, I'm using Flask also, thanks!.
The server (Flask/Python) won't have access to the data-value attribute when you submit the form. It's not part of the data that gets sent to the server.
You might try adding a "hidden" form element, which will send a key/value pair to the server without displaying anything to the user:
<form action="/" method="post">
<input type="hidden" name="value" value="{{[i]}}">
<button class="btn btn-outline-primary btn-sm" type="submit" name="submit_btn" value="favorites" data-value="{{[i]}}">Favorites</button>
</form>
As you can see, you can retain the data-value attribute on the button, but it's not doing anything so only keep it if you're using it in Javascript somehow.
Also note that {{[i]}} will output the string representation of an array with one value, i. So the value you will get on the server is "[5]" if i is 5 for instance. If you want an actual array on the server, there are other ways to do that.
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 am trying to create a simple checkbox that sends the data to server here is my html code.
<form action="." method="POST">
<div class="checksheet">
<input id="XML Parser" class="checkbox" type="checkbox"/>XML Parser
<input id="Feed Parser" class="checkbox" type="checkbox"/>Feed Parser
<input id="Text Parser" class="checkbox" type="checkbox"/>Text Parser
<input id="Case Normalization" class="checkbox" type="checkbox"/>Case Normalization
<input id="Stemmer" class="checkbox" type="checkbox"/> Stemmer
</div>
<div class="submit"><input type="submit" value="Send" name="raw_text"></div>
</form>
What I am trying to do is very similar to the question asked here: Send Data from a textbox into Flask?
But except with the text box.. I have checkboxes.
But I get this error:
Not Found
The requested URL was not found on the server.
If you entered the URL manually please check your spelling and try again.
MY server side code (in flask) is:
#app.route('/raw_text.html')
def home ():
file = "sample.xml"
contents = open(file).read()
contents = contents.decode('utf-8')
return render_template('raw_text.html', contents=contents,file=file)
#app.route('/raw_text.html',methods=['POST'])
def get_data():
print "REQUEST ",request.form()
data = request.form['raw_text']
print data
return "Processed"
Any suggestions.
Thanks
A few things:
Your checkbox elements need a name attribute, this is what is used when the data is sent to the back end. Each checkbox that is related to each other needs to have the same name.
Your action attribute needs to point to a URL. If you are posting it to the same page as the form, you can remove the attribute.
ID's cannot contain spaces.
To be accessible the check boxes need <label>s,