Develop Reference

Use the Button Name for the form button value (Python / Flask)

I've tried searching and havent had much luck so reaching out for some guidance please.
I have a Python app using flask and SQLite. The problem I have run into is that I would like to present a differnt number of buttons on a web page based on the number of races over the previous week. One week it could be 5 races and another week it could be 2 races. Here is an example image:
I have no issue getting the data to the webservice. Where it becomes difficult is that I use a dictionary to build the number of buttons available for that week on the webpage and I only have a single submit button option for a mutiple buttons which mean I am unable to know which button the user selected.
HTML Code
{% for key in raceReRun %}
<button type="submit" class="btn btn-outline-primary btn-sm" name="raceLocationButton" value="button_value">{{ key['race_location'] }}</button>
{% endfor %}
Is there a way to know which button was clicked? Remember that one week it could be 2 buttons and another week it could be 7 buttons and the names changes to a different location.
Hope that makes sense and thank you for your time and help.

Can’t you just assign the value a variable from the loop? Or add something like this to your loop?
{% for key in raceReRun %}
i = 0
i += 1
<button type="submit" class="btn btn-outline-primary-btn-sm" name="raceLocationButton" value=i}{{ key['race_location'] }}</button>
{% endfor %}

Show additional data when checkbox is true Django

I'm working at my first project in Django and learning it by the way. Currently I'm stuck at the part of the project where I have to show additional data if checkbox is selected as true.
Long story short, there have to be checkbox at my page which name is "Cars", if user check the checkbox as True, select list of models of cars should be displayed immediately, below this checkbox, without affecting other input sources on current page.
Is there easy way how to accomplis this? Thanks for help.
/edit
HTML code
<p class="dhcp"> DHCP: {{ form.dhcp }} </p>
<p class="collapse1 collapse"> IPv4 adresy: {{form.ipv4_adress }} </p>
<p class="dhcpv6"> DHCPv6: {{ form.dhcpv6 }} </p>
<p class="collapse2 collapse"> IPv6 adresy: {{form.ipv6_adress }} </p>
JS code
$(document).ready(function() {
$(".dhcp").click(function(event) {
$(".collapse1").fadeToggle().delay(100);
});
$(".dhcpv6").click(function(event) {
$(".collapse2").fadeToggle().delay(100);
});
})
It's just part of it, its quite "big" by now and not telling anything because of being generated by django form. Main issue right now is that if I click on same row as is checkbox, it trigger action of displaying data.

take a look at this JS Fiddle . Its a simple JS solution with a fadeToggle for your problem. The Delay of 100 is optional but it makes the hole thing more elegant although this stays in conflict with your "should be displayed immediately" ;)
<input class="collapsed" type="checkbox">Cars
<div class="collapse2 collapse" style="display:none;">
<li>car hello</li>
<li>car lala</li>
<li>car 1</li>
</div>
$(".collapsed").click(function(event){
$(".collapse2").fadeToggle().delay(100);
})
If there are multiple checkboxes like this you maybe would have to use the this keyword in JS.
That should do the Trick if not leave a comment.

How do I make an html div element follow vertical scrolling (in html/django)?

I'm extremely inexperienced with html and although I know python, I had never used django before this. I'm trying to set up a simple website where the user can view some code on the left side of the screen and enter some text about it on the right side of the screen. The code can be pretty long sometimes so the webpage scrolls, but I want the textbox to always be present even if you scroll up or down. As my code is now, the textbox is on the right side of the screen, but it always stays at the bottom. Here's a screenshot of what it looks like:
(can't seem to get screenshot to show up in the post, here's the link http://imgur.com/3JfgHH3)
Here's the .html file I'm using in my templates directory in django:
<div style="display: inline-block">
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
<pre>{{ source_code }}<pre>
</div>
<div style ="display: inline-block" >
<form method="post" action="/labeling/{{ document_id }}/send/">
{% csrf_token %}
<input type="text" name="textfield">
<input type="submit" value="Finish" name="finish_btn" />
</form>
</div>
Sorry for my complete lack of html knowledge. How would I fix this either in django or in the html file directly so that the textbox and button move up and down with the scrolling, instead of being permanently attached to the bottom right of the screen? If necessary I can post the django code too, I just wasn't sure if this was possible directly in html.

<div style ="display: inline-block;position: fixed;" >
Implement position: fixed; into your styling of the first div. That should already do the trick. Like #furas said is - when it comes to styling - CSS the language you have to learn.

In the CSS file please add the following Code:
div.[class_name_of_div_element] {
position: fixed;
}

Mechanize without a form, just textbox and button

I've been searching Google for almost every query I can think of related to this. The page I'm trying to submit is something similar to this. There is no form. The objects are not grouped in a form. Most other threads talk about the form not having a name, but in my case, the page doesn't have a form at all.
<div class="container">
<br/>
<img id="imageXYZ" />
<br/>
<input id="inputXYZ" />
<br/>
<button id="submitObject">Go</button>
<br/>
<script type="text/javascript">blah blah blah</script>
</div>
So when there is no form, simply just an input field and button, how do I select a form so I can fill in the text box and click the button?
Thank-you so much!

To do this, I had to do 2 things to get this to work with the code above. First, I had to use this line of code to select all the objects without a form.
Br.form = Br.global_form()
Secondly, the HTML code is formatted wrong, so I had to add a parameter to my initial browser call:
Br = mechanize.Browser(factory=mechanize.RobustFactory())

twitter bootstrap href button does not work

I am creating a html template for a django based app. I am using the twitter bootstrap API for buttons here, but one of them (the cancel button) doesn't seem to be working correctly. I link it to another page using an href, but when I click on the button, it redirects to the current page's post method. See below:
<h2>Add new Schedule:</h2>
<form class="form-horizontal" method='post'>
<table>
{% load bootstrap %}
{{ form|bootstrap }}
{% csrf_token %}
<tr>
<td></td>
<td>
<input class="btn btn-primary" type='submit' name='reset' value='Save' />
</td>
<td></td>
<td>Cancel</button></td>
</tr>
</table>
</form>
However, if I get rid of the button and use it as a simple href it seems to work:
<td><a href='{%url head.views.edit_instance_binding binding.id %}'>Cancel</a></td>
What's going on here?

You have a <button> inside an <a> element - get rid of the button, otherwise you'll be submitting your form.
If you want your anchor to be styled as a button, give it a btn class.
And Bootstrap is just a big set of CSS facilities with little js thrown in - no APIs at all :))
EDIT: nowadays HTML semantics and appearance are well separated [though someone may argue that Bootstrap has its hacks regarding this, see its <i>'s use for icons].
Keeping the eye on your case, you wanted to use a <button> to style a simple anchor like an embossed button. But a <button> tag is just a way to provide a richer <input type="submit">, in which you can insert images for example [see all the BS examples with icons beside buttons].
Well, <input type="submit"> and <button> inside a <form> trigger the latter's action, i.e. they post some data the user entered to such location.
If you just need to reach some URL without submitting anything, you need an anchor tag [<a>], which can be styled as you wish, e.g. with BS btn, btn-primary, btn-whateva classes.