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.
Related
I am new working with HTML and Python, and I am trying to develop some code for personal use.
The goal is to show the different leagues with a color code: red or green, and if I click on a league, it opens a different tab with more detailes information of that league, that is to say, it would be necessary to send the id of the league to the server to be able to use it for the next tab. I am trying to use a form, but it is not working.
The if-else condition is just to choose whether the color is red or green based on a league condition.
The problem I am having is that, creating the form with the for loop as I am doing, the league id that sends is always the same (1st league of the lopp), it is not dynamic, then I would like to know how to program it to be able to see the chosen league.
No matter on what league you click, you always access the same league information. I guess there is something wrong with the code because it is not dynamic, it does not display info based on my selection.
My idea was to have multiple forms created with the loop, one for each league, but it doesnt work.
I would really appreciate your help, thank you very much!
This is the HTML code:
competicionesAPIDict is a dict where the key is the country and the values the different leagues that exists in it.
competicionesAPI is the value obtained from the dict, that is iterated to get the info from each league.
<div style="width: 80%; height: 70%; background-color: azure; width: max-content">
{% for paisAPI, competicionesAPI in competicionesAPIDict.items() %}
<div class="div_pais">
<h4>{{paisAPI}} </h4>
<img src={{dict_banderas_pais[paisAPI]}} alt="No funciona" width="30px" height="30px"/>
{% for competicionAPI in competicionesAPI %}
{% if dict_hay_competicion[competicionAPI['id']] %}
<form name="siCompeticion"+{{competicionAPI['id']}} method="POST" action="/RAI/API/competicion">
<input type="hidden" name="id_competicion" value={{competicionAPI['id']}} />
<a href=/RAI/API/competicion style="font-size: 14px;margin-left: 17px;color: green;"
onclick="document.forms[0].submit();return false;">{{competicionAPI['name']}}</a>
</form>
{% else %}
<form name="noCompeticion"+{{competicionAPI['id']}} method="POST" action="/RAI/API/competicion">
<input type="hidden" name="id_competicion" value={{competicionAPI['id']}} />
<a href=/RAI/API/competicion style="font-size: 14px;margin-left: 17px;color: red;"
onclick="document.forms[0].submit();return false;">{{competicionAPI['name']}}</a>
</form>
{% endif %}
{% endfor %}
</div>
{% endfor %}
OK, I was wrong in a comment about hidden input field value being a problem.
I mean, it is still a problem, but it should work as is, except for JS code bug you made.
So first, what gave me wrong impression was that you would usually make one form per request, and then do as I said, set the forms values correctly to provide data of the request upon submit. You made a lot of forms, one per iteration, which is not wrong, but what you did is say in onclick event to activate always the first form on the site. I.e.
document.forms[0]
so, whatever you click, only first form will be submitted with the value of the first hidden input field in it.
As you have if-else clauses, I wouldn't rely on form indexes within the DOM, but use something to create unique IDs per each form, then use document.getElementById() to get that exact form and submit it. But you already gave your forms names, so you can use those with document.getElementsByName() or give the form an ID of same value.
Names does not need to be unique, IDs should.
Just a little sample:
<form id="siCompeticion"+{{competicionAPI['id']}} ...>
<input type="hidden" name="something" value={{competicionAPI['id']}}>
CLICK ME
</form>
In your place I would most probably write a little JS code to perform AJAX request, most likely using jquery. In any case, I would avoid making a lot of forms.
I am developing a Python-Django website and want to take input from the user and use it. So i could use this code in my HTML page:
<form method="get">
<fieldset><legend>Form</legend>
<table>
<tr><td>Name </td><td><input type="text" name="name"> </td></tr>
<tr><td></td><td><input type="submit" value="Submit"></td></tr>
</table>
</fieldset>
</form>
Thus, could get a link ending with the input. But how do I use that input on my tag.py or even other HTML pages? Would be glad if someone helps.
You have to create form and then place it in table cell.
Read documentation about Django forms
MechanicalSoup's tutorial shows you how to do things with named input boxes, but not everyone who writes html takes care with naming. I have an html page with a single form containing an un-named checkbox (which when you check it, checks all the others) plus a large number of other checkboxes all named 'alpkey'. Can anyone help me select the first checkbox, or alternatively, find and select all the checkboxes in the page? I need to do this and then follow the link in the 'More info' button. The html code goes like this:
<p></p>
<form name="summform" target="_blank" action="/cgi-bin/RBG" method="post">
<input type="hidden" name="form" value="PNG/png2">
<center>
<table width="850" frame="below">
<tr><td><div>39 matches found</div>
</td></tr>
<tr><td><i>Select the records you wish to see more information on</i> <b>:</b>
<br>
</td></tr>
<tr><td><input type="checkbox" onclick="if(this.checked){checkAll(true)}else{checkAll(false)}">
<b>Select ALL/None</b>
<input type="submit" value="More Info">
Click on thumbnail to see larger image.
</td></tr>
</table>
<table width="850" frame="below">
<tr>
<td></td>
<td width="50" align="center"><b>LAE No.</b></td>
<td align="center"><b>Summary of record</b></td>
<td align="center"><b>Specimen Images</b></td>
<tr>
<td><input type="checkbox" name="alpkey" value="83237" /></td>
<td width="50" align="center"></td>
<td align="left">
<b><font color="#FFCC33">
....and so on. Or do I need Selenium?
Update:
the code below code works (or seems to - browser.launch_browser() doesn’t work unless I use StatefulBrowser, so I can’t visually inspect the results)...but I can’t get any further. I can’t work out how to follow the ‘submit’ button link.
browser = mechanicalsoup.Browser()
page = browser.get(myurl)
soup = page.soup
form = soup.select("form")[0]
for i in range(3, len(form.select("input"))):
form.select("input")[i].checked = 'checked'
# print(form.select("input")[i].checked)
submit = soup.findAll(type='submit')
#form2 = soup.select_form()
#form2.choose_submit('More Info')
#page2 = browser.submit(form, page.url)
....alternatively, it seems that when I use browser = mechanicalsoup.StatefulBrowser() I’m unable to loop through the checkboxes.
This worked - to loop through a load of checkboxes, all with the same name but different 'checked' attributes (indicated in the html as e.g. value="83237"), check them all (by setting the appropriate value) and finally submit the form:
browser = mechanicalsoup.StatefulBrowser()
browser.open(myurl) # having set URL variable
browser.select_form('form[name="summform"]') # only one form on page, this was its name
check = browser.page.find_all('input')
rangeval = len(check)-2 # to loop through checkboxes, ignoring a couple of other input tags
names = []
for i in range(3, rangeval):
names.append(check[i]['value']) # get list of values to set
browser["alpkey"] = names # all checkboxes have the same name so use list
browser.launch_browser() # verify that they're all checked
response = browser.submit_selected() # and submit form
print(response.url)
print(response.text)
...it would've been nicer to just check the 'check all' box, but that was unnamed and had no 'value' attribute.
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;
}
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())