The relevant part of my flask code is:
#app.route("/process", methods = ["GET", "POST"] )
def process_form():
#checked = request.form.getlist('option')
checked=request.form('option')
with open('checked.txt','w') as file:
file.write("%s"%checked)
# do something with checked array
return checked
and my html looks like:
<div class="container" id='tog'>
<div class="half">
<form action="/process" method="POST">
<input type="radio" name="option" value="original" />
<h3>originak value<h3>
</div>
<div class="half">
<input type="radio" name="option" value="freq" />
<h3>Term Freq<h3>
</div>
</form>
</div>
The idea is that I want to find out which radio button was selected and store the information is a text file. But that does not seem to be working.
I changed the html to:
<form action="/process" method="POST">
<div class="half">
<input type="radio" name="option" value="original" />
</div>
<div class="half">
<input type="radio" name="option" value="freq" />
</div>
<input type="submit" value="Submit">
</form>
and now I get a 400 Bad Request error
You don't have a submit button inside of your form. Add one.
<input type="submit" value="Submit!" />
Also, you probably want to change request.form('option') to request.form['option']
Related
what is the proper way to parse multiple .html files within directory, search and remove part of html code in these files?
For example, I need to remove a html code from all files:
<div class="box">
<h2>Book Search</h2>
<div id="search">
<form action="http://www.biology35.com/search.php" method="post">
<input type="text" name="searchfor" class="txtField" />
<input type="image" src="new/images/btn-go.png" name="Submit" value="Submit" class="button" />
<div class="clear"><!-- --></div>
</form>
</div>
</div>
I use Geany 1.29 file editor on Debian. Regex is probably not suitable for this. Some shell script or python?
You can use htql, for example:
html = """
something before
<div class="box">
<h2>Book Search</h2>
<div id="search">
<form action="http://www.biology35.com/search.php" method="post">
<input type="text" name="searchfor" class="txtField" />
<input type="image" src="new/images/btn-go.png" name="Submit" value="Submit" class="button" />
<div class="clear"><!-- --></div>
</form>
</div>
</div>
html after
"""
import htql
x=htql.query(html, "<div norecur (class='box') > &delete ")[0][0]
You get:
>>> x
'\nsomething before\n \n\nhtml after\n'
I want to add styling to the below form (main objective is to change the text color of placeholder as my form is of dark color and the placeholder is not visible due to its default gray color) I am sure there must be some way to achieve this in the template only.
Snippet from CSS
::placeholder {
color: aquamarine;
opacity: 1;
}
Snippet from Template
<form action="{% url 'register' %}" class="box" method="POST">
<input type="text" name="username" placeholder="{{form.username.label}}" id=""/>
<input type="text" name="firstname" placeholder="{{form.first_name.label}}" id="" />
<input type="text" name="lastname" placeholder="{{form.last_name.label}}" id=""/>
<input type="text" name="email"placeholder="{{form.email.label}}"id="" />
<input type="text" name="password1" placeholder="{{form.password1.label}}" id=""/>
<input type="text" name="password2" placeholder="{{form.password2.label}}" id=""/>
<input type="submit" value="Submit" />
</form>
This is my form that I have created to add a new user (django.contrib.auth.models User). I am not sure how do I use {{form.username}} in the existing form. If I simply put {{form.username}} to the form it is creating a new field without any styling applied to it.
Maybe I misunderstood what you want to achieve, but you can simply set custom CSS via <style></style> tag. If you would like to a more sophisticated solution, you can define CSS class in form widget attributes or append custom styles to form.
<style>
::placeholder {
color: aquamarine;
opacity: 1;
}
</style>
<form action="{% url 'register' %}" class="box" method="POST">
<input type="text" name="username" placeholder="{{form.username.label}}" id=""/>
<input type="text" name="firstname" placeholder="{{form.first_name.label}}" id="" />
<input type="text" name="lastname" placeholder="{{form.last_name.label}}" id=""/>
<input type="text" name="email"placeholder="{{form.email.label}}"id="" />
<input type="text" name="password1" placeholder="{{form.password1.label}}" id=""/>
<input type="text" name="password2" placeholder="{{form.password2.label}}" id=""/>
<input type="submit" value="Submit" />
</form>
I found a dirty fix for the problem. I first entered made the form like below -
<form action="{% url 'register' %}" class="box" method="POST">
{{form.username}}
{{form.first_name}}
...
</form>
Then I inspected the rendered template and stole the HTML equivalent of the above code. I have added the all the required attributes in the input tags. It looks like below snippet -
{% csrf_token%}
<input
type="text"
name="username"
maxlength="150"
**placeholder="Username"**
autofocus=""
required=""
id="id_username"
/>
<input
type="text"
name="first_name"
maxlength="30"
**placeholder="First Name"**
id="id_first_name"
/>
...
I know this probably is not a perfect solution and there must be a more elegant way of handling this scenario. However, I am going ahead with this approach for time being as it is serving the purpose.
I'm pretty new to html coding. I am trying to implement a simple application that asks the user to input a salutation, first name, and last name. Upon submission, instead of storing the names into a database, I just want an alert or print statement to appear below the form itself that says "Welcome" + salutation + last name.
I thought I could just implement this using a simple python script and an html file that holds all the contents. Is there something more to this?
app.py
#!/usr/bin/env python3
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/")
def main():
return render_template('form.html')
if __name__ == "__main__":
app.run()
form.html
<html lang="en">
<body>
<div class="container">
<div class="jumbotron">
<h1>Gettin' a feel for docker</h1>
<form class="form" method= "post" onSubmit= "alert('Welcome')">
<label for="salutation" class="sr-only">Salutation</label>
<input type="salutation" name="salutation" id="salutation" class="form-control" required autofocus><br>
<label for="firstName" class="sr-only">First Name</label>
<input type="name" name="firstName" id="firstName" class="form-control" required autofocus><br>
<label for="lastName" class="sr-only">Last Name</label>
<input type="name" name="lastName" id="lastName" class="form-control" required><br>
<button id="submit" class="btn btn-lg btn-primary btn-block" type="button">Submit</button>
</form>
</div>
</div>
</body>
</html>
In order to dynamically display the results of the user input upon a button click, you will have to use jquery.
<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</header>
<body>
<div class='wrapper'>
<input type='text' id='salutation'>
<input type='text' id='firstname'>
<input type='text' id='lastname'>
<button class='get_greeting'>Display</button>
<div class='results'></div>
</div>
</body>
<script>
$(document).ready(function(){
$('.wrapper').on('click', '.get_greeting', function(){
$('.results').html('<p>Welcome, '+$('#salutation').val()+' '+$('#firstname').val()+' '+$('#lastname').val()+'</p>')
});
});
</script>
</html>
The code as per your requirement in form.html should be as follow :
<html lang="en">
<body>
<div class="container">
<div class="jumbotron">
<h1>Gettin' a feel for docker</h1>
<form class="form" method= "post" onSubmit= "alert('Welcome')">
<label for="salutation" class="sr-only">Salutation</label>
<input type="salutation" name="salutation" id="salutation" class="form-control" required autofocus><br>
<label for="firstName" class="sr-only">First Name</label>
<input type="name" name="firstName" id="firstName" class="form-control" required autofocus><br>
<label for="lastName" class="sr-only">Last Name</label>
<input type="name" name="lastName" id="lastName" class="form-control" required><br>
<button id="submit" class="btn btn-lg btn-primary btn-block" type="button" onclick="show_alert()">Submit</button>
</form>
</div>
</div>
<script type="text/javascript">
function show_alert(){
alert("Welcome, "+ document.getElementById('salutation').value + " " + document.getElementById('firstName').value + " " + document.getElementById('lastName').value);
}
</script>
</body>
</html>
I know how to set up Django forms to have Django render them. Unfortunately styling forms then becomes a little less straight forward. I am interested in finding a way to have the HTML form pass its entered values to Django. The HTML form is completely programmed in HTML and CSS. Just for context, please find below a list of solutions I dismissed for several reasons:
Set up custom template filter (CSS styling in Django forms)
Use a for loop in order to loop through each form and render each field in turn (How to style a django form - bootstrap)
Reference the form fields directly y using list items https://stackoverflow.com/posts/5930179/revisions
My problem with the first two solutions is that my s inside my form rely on class attributes which sees them assigned into a left or right column (col_half and col_half col_last).
The third doesn't quite work for me since my form is not using list items. If I happen to convert my form into list items, a strange border is added into the form field (see screenshot below).
As such I am wondering whether there is a way to just keep my HTML template and assign its valued to the forms.py one-by-one without getting this strange border (ideally I would like to stick to my input tag)? Any ad advice would be highly appreciated.
Please see the HTML form below:
<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post">
<div class="col_half">
<label for="register-form-name">First Name:</label>
<input type="text" id="register-form-name" name="register-form-name" value="" class="form-control"/>
</div>
<div class="col_half col_last">
<label for="register-form-name">Last Name:</label>
<input type="text" id="register-form-name" name="register-form-name" value="" class="form-control" />
</div>
<div class="col_half">
<label for="register-form-email">Email Address:</label>
<input type="text" id="register-form-email" name="register-form-email" value="" class="form-control" />
</div>
<!-- <div class="clear"></div> -->
<div class="col_half col_last">
<label for="register-form-username">Choose a Username:</label>
<input type="text" id="register-form-username" name="register-form-username" value="" class="form-control" />
</div>
<div class="col_half">
<label for="register-form-phone">Phone:</label>
<input type="text" id="register-form-phone" name="register-form-phone" value="" class="form-control" />
</div>
<!--<div class="clear"></div> -->
<div class="col_half col_last">
<label for="register-form-phone">Country</label>
<input type="text" id="register-form-phone" name="register-form-phone" value="" class="form-control" />
</div>
<div class="col_half">
<label for="register-form-password">Choose Password:</label>
<input type="password" id="register-form-password" name="register-form-password" value="" class="form-control" />
</div>
<div class="col_half col_last">
<label for="register-form-repassword">Re-enter Password:</label>
<input type="password" id="register-form-repassword" name="register-form-repassword" value="" class="form-control" />
</div>
<div class="clear"></div>
<div class="col_full nobottommargin">
<button class="button button-3d button-black nomargin" id="register-form-submit" name="register-form-submit" value="register">Register Now</button>
</div>
</form>
Ok, I figured it out.
The trick was to realize that Django will already render its form tags (i.e. {{form.firstName}}) to an input tag. We can then add class attributes to this tag in in forms.py where we define this form:
HTML:
<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post">
<div class="col_half">
<label for="register-form-name">First Name:</label>
{{ form.firstName }}
</div>
</form>
FORMS.PY:
class newUserRegistration(forms.Form):
firstName = forms.CharField(widget=forms.TextInput(attrs={'type': 'text', 'id':'register-form-name', 'name':'register-form-name', 'value':"", 'class':'form-control'}))
class Meta:
# specify model to be used
model = model_name
exclude = ()
THIS RENDERS THE HTML AS FOLLOWS
<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post">
<div class="col_half">
<label for="register-form-name">First Name:</label>
<input type="text" id="register-form-name" name="register-form-name" value="" class="form-control" />
</div>
</form>
By adding the attributes to forms.py we are essentially rendering the input tag into the HTML.
I'm using the requests module with python 3.3 and am trying to post data. This is the data I'm trying to post. I've already parsed the values from the html:
<form action="/checkoutnow/2" autocomplete="off" class="proceed" id="loginForm" method="post" name="login_form" novalidate="novalidate">
<input id="loginForm" name="execution" type="hidden" value="e21s1"> <input name="token" type="hidden" value="EC-2MJ027776Y1687721"> <input id="incontext" name="incontext" type="hidden" value="0"> <input id="eventID" name="_eventId_submit" type="hidden">
<div class="" id="loginFields">
<div class="inputField emailField confidential">
<label for="email">Email</label> <input autocomplete="off" data-validate-email="true" id="email" name="email" type="email" value="">
<div class="tip tipHint">
<div class="tipArrow tipArrowFront tipHintArrowFront"></div>
<div class="tipArrow tipArrowBack tipHintArrowBack"></div>
<ul class="tipText tipHintText">
<li>Did you mean <a class="emailLink" href=""></a>?
</li>
</ul>
</div>
</div>
<div class="inputField passwordField confidential">
<label for="password">Password</label> <input autocomplete="off" id="password" maxlength="22" name="password" type="password" value="">
<div class="toolTip tip guestTooltip">
<div class="tipArrow tipArrowFront tipErrorArrowFront"></div>
<div class="tipArrow tipArrowBack tipErrorArrowBack"></div>
<div class="tipText tipErrorText">
Trouble logging in? You can try again, or <a class='submit' href='/checkoutnow/2?execution=e21s1&_eventId_guest' id='guestTooltipLink'>check out as a guest</a>
</div>
</div>
</div>
</div>
<div class="buttons varA">
<input class="btn full continue" name="_eventId_submit" type="submit" value="Log in to PayPal">
<div class="forgotPassword secondary" id="forgotPasswordSection">
<a href='/us/merchantpaymentweb?cmd=_account-recovery&from=PayPal' id='forgotPassword' target='_blank'>Forgot your password?</a>
</div>
<hr class="sep">
<a class="btn btn-secondary submit" href="/checkoutnow/2?execution=e21s1&_eventId_guest&token=EC-2MJ027776Y1687721" id="checkoutAsAGuestBtn">Pay with Debit or Credit Card</a>
</div>
</form>
And here is my code to get past this. I am using a session btw.
payload6 = {'loginFields': {'password': paypalpass, 'email': useremail}, 'token': token, 'execution': execution, 'incontext': incontext, '_eventId_submit': ''}
r = session.post(urlnow, data=payload6)
I believe my problem is with the 'loginFields' as after I post, the values are still empty.
Your POST data shouldn't have any nested dicts. password and email should be top-level keys like token and execution are, and not nested under loginFields like they are now. (I assume loginFields is in your payload now because of that <div id="loginFields">, but wrappers like that shouldn't have any effect on how the POST data is structured.)
It turns out javascript was generating more variables. Thanks for the help though.