I am using bottle framework and python to make a website. After using bootstrap, the submit button of my form is not working.
Here is my code in the button3.tpl file:
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Insert Artist</h1>
</div>
<hr>
<div class="container"
<form role="form" method="post" action="/result4">
<div class="form-group">
<laber>National ID</label>
<input class="form-control" type="text" name="ID" value=""><br>
</div>
<div class="form-group">
<laber>Name</label>
<input class="form-control" type="text" name="Name" value=""><br>
</div>
<div class="form-group">
<laber>Surname</label>
<input class="form-control" type="text" name="Surname" value=""><br>
<div class="form-group">
<label>Birth Year</label>
<input class="form-control" type="number" name="Birth" min="1900" max="2016"><br>
</div>
<input class="form-control" type="submit" value="Update Information">
</form>
</div>
<hr>
</body>
Why does it not redirect in the proper link ?
Related
I pass the variable with render_template() and the html outputs empty space in place of the variable.
Here's my flask code based on a tutorial:
#import Flask
from flask import Flask, render_template, request
#create an instance of Flask
app = Flask(__name__)
#app.route('/')
def home():
return render_template('home.html')
#app.route('/predict/', methods=['GET','POST'])
def predict():
if request.method == "POST":
#get form data
tv = request.form.get('tv')
radio = request.form.get('radio')
newspaper = request.form.get('newspaper')
return render_template('predict.html')
#call preprocessDataAndPredict and pass inputs
try:
prediction = preprocessDataAndPredict(tv, radio, newspaper) #pass prediction to template
return render_template('predict.html', my_prediction = prediction)
except ValueError:
return "Please Enter valid values"
pass
pass
def preprocessDataAndPredict(tv, radio, newspaper): #put all inputs in array
test_data = [tv, radio, newspaper]
print(test_data) #convert value data into numpy array
test_data = np.array(test_data).astype(np.float) #reshape array
test_data = test_data.reshape(1,-1)
print(test_data) #open file
file = open("lr_model.pkl","rb") #load trained model
trained_model = joblib.load(file) #predict
prediction = trained_model.predict(test_data)
return prediction
pass
if __name__ == '__main__':
app.run(debug=True)
And here is the predict.html file:
<!doctype html>
<html>
<head>
<title> Prediction </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head>
<body>
<div class="container">
<div class="row my-5 pl-3">
<p>Prediction is {{ my_prediction }}</p>
</div> </div>
</body>
</html>
I tried passing simple, hardcoded variables but the target html only displays "Prediction is" and doesn't show any passed variable.
I'll appreciate every suggestion on how to fix this!
Edit: also attaching the home.html file:
<!doctype html>
<html>
<head>
<title> Predict Sales </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head>
<body>
<div class="container">
<div class="row my-5 pl-3">
<h1>Predict Sales</h1>
</div> <!-- Starts form section -->
<div class="form-container ">
<form class="form-horizontal" action = "/predict/" method="post"> <div class="form-group row">
<label class="control-label col-sm-2" for="tv">TV:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="tv" name="tv">
</div>
</div> <div class="form-group row">
<label class="control-label col-sm-2" for="radio">Radio:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="radio" name="radio">
</div>
</div> <div class="form-group row">
<label class="control-label col-sm-2" for="newspaper">Newspaper:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="newspaper" name="newspaper">
</div>
</div> <div class="form-group row">
<label class="control-label col-sm-2" for=""> </label>
<div class="col-sm-offset-2 col-sm-4">
<button type="submit" class="btn btn-primary">Predict</button>
</div>
</div>
</form>
<!-- Ends form section -->
</div>
</div>
</body>
</html><!doctype html>
<html>
<head>
<title> Predict Sales </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head>
<body>
<div class="container">
<div class="row my-5 pl-3">
<h1>Predict Sales</h1>
</div> <!-- Starts form section -->
<div class="form-container ">
<form class="form-horizontal" action = "/predict/" method="post"> <div class="form-group row">
<label class="control-label col-sm-2" for="tv">TV:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="tv" name="tv">
</div>
</div> <div class="form-group row">
<label class="control-label col-sm-2" for="radio">Radio:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="radio" name="radio">
</div>
</div> <div class="form-group row">
<label class="control-label col-sm-2" for="newspaper">Newspaper:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="newspaper" name="newspaper">
</div>
</div> <div class="form-group row">
<label class="control-label col-sm-2" for=""> </label>
<div class="col-sm-offset-2 col-sm-4">
<button type="submit" class="btn btn-primary">Predict</button>
</div>
</div>
</form>
<!-- Ends form section -->
</div>
</div>
</body>
</html>
It seems that you always return
return render_template('predict.html')
When you POST something and you never reach the return with the value you have later.
Overall you need to handle what is happening when you do not have a POST request, in your case a GET that is which will render the initial html. And when something is submitted you should render or redirect the html with the values you want.
EDIT After some clarifications you gave
Please check below:
home.html
<!doctype html>
<html>
<head>
<title> Predict Sales </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head>
<body>
<div class="container">
<div class="row my-5 pl-3">
<h1>Predict Sales</h1>
</div> <!-- Starts form section -->
<div class="form-container ">
<form class="form-horizontal" action = "/predict/" method="post"> <div class="form-group row">
<label class="control-label col-sm-2" for="tv">TV:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="tv" name="tv">
</div>
</div> <div class="form-group row">
<label class="control-label col-sm-2" for="radio">Radio:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="radio" name="radio">
</div>
</div> <div class="form-group row">
<label class="control-label col-sm-2" for="newspaper">Newspaper:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="newspaper" name="newspaper">
</div>
</div> <div class="form-group row">
<label class="control-label col-sm-2" for=""> </label>
<div class="col-sm-offset-2 col-sm-4">
<button type="submit" class="btn btn-primary">Predict</button>
</div>
</div>
</form>
<!-- Ends form section -->
</div>
</div>
</body>
</html><!doctype html>
I removed the duplicate form to check only with one set of inputs.
predict.html is the same
flask code:
#import Flask
from flask import Flask, render_template, request
#create an instance of Flask
app = Flask(__name__)
#app.route('/')
def home():
return render_template('home.html')
#app.route('/predict/', methods=['GET','POST'])
def predict():
if request.method == "POST":
#get form data
tv = request.form.get('tv')
radio = request.form.get('radio')
newspaper = request.form.get('newspaper')
prediction = preprocessDataAndPredict(tv, radio, newspaper)
return render_template('predict.html', my_prediction = prediction)
pass
def preprocessDataAndPredict(tv, radio, newspaper): #put all inputs in array
# test_data = [tv, radio, newspaper]
# print(test_data) #convert value data into numpy array
# test_data = np.array(test_data).astype(np.float) #reshape array
# test_data = test_data.reshape(1,-1)
# print(test_data) #open file
# file = open("lr_model.pkl","rb") #load trained model
# trained_model = joblib.load(file) #predict
# prediction = trained_model.predict(test_data)
prediction = "hello"
return prediction
if __name__ == '__main__':
app.run(debug=True)
I have added a call to your function before the rendering. I just return a string here just to demonstrate how you could set it up. I also commented the core functionality -i miss some libs- and make it to just return a value.
This works. So now when you click the button you will get:
Prediction is hello
in your browser. Can you build on this example?
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 have this dropdown menu from Bootstrap. I have different categories that a user could choose from. When they click the 'Department' button and select a department, I would like the 'Department' button to change to whatever the user selected. I have attached the HTML for the dropdown.
<form class="navbar-form navbar-left" action="{{ url_for('my_view.product_search') }}" method="GET">
<div class="form-group">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Department <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Laptops</li>
<li>Cameras</li>
<li>Gaming</li>
<li>Networking</li>
<li>Tools</li>
<li>Headphones</li>
<li>Speakers</li>
<li>Miscellaneous</li>
<li>Blu-Ray</li>
</ul>
</div><!-- /Dropdown Button -->
<input type="text" name="name" class="form-control" placeholder="Search Products...">
</div><!-- /input-group -->
<button type="submit" class="btn btn-default">Submit</button>
</div><!-- /.col-lg-6 -->
</div>
</form><!-- END SEARCH FUNCTION -->
EDIT
Here is a link to what the dropdown looks like
You need to use javascript. I added a click event to the links within the <li> tag, and a <span> within your button to allow for simple jQuery selection. The URLs here are relative to my local testing environment.
This is a working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StackOverflow Testing...</title>
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
</head>
<body>
<form action method="post">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="button_text">Department</span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="select_option" href="#">Laptops</a></li>
<li><a class="select_option" href="#">Cameras</a></li>
<li><a class="select_option" href="#">Gaming</a></li>
<li><a class="select_option" href="#">Networking</a></li>
<li><a class="select_option" href="#">Tools</a></li>
<li><a class="select_option" href="#">Headphones</a></li>
<li><a class="select_option" href="#">Speakers</a></li>
<li><a class="select_option" href="#">Miscellaneous</a></li>
<li><a class="select_option" href="#">Blu-Ray</a></li>
</ul>
</div><!-- /Dropdown Button -->
<input type="text" name="name" class="form-control" placeholder="Search Products...">
</div><!-- /input-group -->
<button type="submit" class="btn btn-default">Submit</button>
</div><!-- /.col-lg-6 -->
</div>
</form>
<script charset="utf-8" type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script charset="utf-8" type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script charset="utf-8" type="text/javascript">
$('a.select_option').bind('click', function() {
var selected = $(this).text();
$('#button_text').text(selected);
});
</script>
</body>
</html>
This is my code for my template
{% block content %}
<div class='main'>
<form method='POST' action='/social/profile/' enctype='multipart/form-data'>
{% csrf_token %}
<h3>Select an image for your profile. Max 300x300 and 1mb.</h3>
<br/>
<img src="{{ image.url }}" alt="Profile Image" height="100px" width="100px" />
{{ form.profileimg.errors }}
{{ form.profileimg }}
{{ form.non_field_errors }}
<br/>
<h3>Enter or edit your details</h3> <br/>
<textarea name='text' cols='50' rows='3'>{{ text }}</textarea>
<h3>Current Workplace</h3>
<br/>
<input id="workplace" type="text" class="" name="workplace" value="{{ workplace }}">
<h3>Telephone Number</h3>
<br/>
<input id="telephone" type="text" class="" name="telephone" value="{{ telephone }}">
<h3>Address</h3>
<br/>
<textarea id="address" type="text" class="" name="address">{{ address }}</textarea>
<br/>
<input type="submit" value="Submit" >
</form>
</div>
{% endblock %}
The form.profileimg is very simple with only 1 ImageField.
But the submit button is not click-able for some reason? It was working before the form.profileimg field, can I not mix Django Forms and normal html?
Browser source:
<!DOCTYPE HTML>
<html>
<head>
<title>Social Network: Facemagazine</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/static/social/css/main.css" />
</head>
<body class="loading">
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
<div id="main">
<!-- Header -->
<header id="header" class="whitebox">
<h1> Facemagazine </h1>
<p>Worlds second best social network! </p>
<nav >
<ul>
<li><a class='icon' href='/social/members/?view=julian'> <h3> Home </h3> </a></li>
<li><a class='icon' href='/social/members/'> <h3>Members </h3> </a></li>
<li><a class='icon' href='/social/friends/'> <h3> Friends </h3> </a></li>
<li><a class='icon' href='/social/messages/'> <h3> Messages </h3> </a></li>
<li><a class='icon' href='/social/profile/'> <h3> Edit Profile </h3> </a></li>
<li><a class='icon' href='/social/logout/'> <h3> Log out </h3> </a></li>
</ul>
</nav>
<br>
<div class='main'>
<form method='POST' action='/social/profile/' enctype='multipart/form-data'>
<input type='hidden' name='csrfmiddlewaretoken' value='kire68pdevP0JZt8gTUYSsj6Dit1cgro' />
<h3>Select an image for your profile. Max 300x300 and 1mb.</h3>
<br/>
<img src="/media/profileimgs/no-img.jpg" alt="Profile Image" height="100px" width="100px" />
<input id="id_profileimg" name="profileimg" type="file" />
<br/>
<h3>Enter or edit your details</h3> <br/>
<textarea name='text' cols='50' rows='3'>Test Details</textarea>
<h3>Current Workplace</h3>
<br/>
<input id="workplace" type="text" class="" name="workplace" value="Workplacee">
<h3>Telephone Number</h3>
<br/>
<input id="telephone" type="text" class="" name="telephone" value="Telefon">
<h3>Address</h3>
<br/>
<textarea id="address" type="text" class="" name="address">adres</textarea>
<br/>
<input type="submit" value="Submit" >
</form>
</div>
<br>
</header>
<!-- Footer -->
<footer id="footer">
<span class="copyright">© Group 45</span>
</footer>
</div>
</div>
<!--[if lte IE 8]><script src="/static/social/js/ie/respond.min.js"></script><![endif]-->
<script>
window.onload = function() { document.body.className = ''; }
window.ontouchmove = function() { return false; }
window.onorientationchange = function() { document.body.scrollTop = 0; }
</script>
<script src="/static/social/scripts.js"/>
</body>
</html>
Issue was the footer. The CSS was messed up so was overlaying on top of the button somehow.
I can not figure out for the life of me why it is showing a Unresolved reference for 'self' after the form_head, form_body, and form_foot bit... which isn't allowing the Google Engine Application to display and run correctly. Any help would be helpful.
import webapp2
class MainHandler(webapp2.RequestHandler):
def get(self):
#web page sections
form_head='''<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>Gamers R' Us Subscribing</title>
</head>
<body>'''
form_body='''
<div class="maincontainer">
<h1>Welcome to Gamers R' Us!</h1>
<div id="bgimg">
<p>Filler atm.</p>
<div id="formbox">
<h2>Subscribe Today!</h2>
<form method="GET">
<label>Full Name: </label><input type="text" name="name" placeholder=" John Doe"/><br>
<label>Email: </label><input type="text" name="email" placeholder=" me#domain.com"/><br>
<select name="system" class="selectbox">
<option value="ps4">Playstation 4</option>
<option value="xbone">Xbox One</option>
<option value="wiiu">Wii U</option>
<option value="pc">PC Gaming</option>
</select><br>
<input type="radio" name="genre" value="FPS">First Person Shooter.<br>
<input type="radio" name="genre" value="MOBA">Multiplayer Online Battle Arena.<br>
<input type="radio" name="genre" value="RPG">Role-Playing Game.<br>
<input type="radio" name="genre" value="RTS">Real Time Strategy.<br>
<input type="radio" name="genre" value="Other">Other Genre.<br>
<input type="checkbox" name="subscribe" value="yes" checked>Subscribe for gaming updates and more!<br>
<input type="submit" class="subbtn" value="Done" />
</form>
</div>
</div>
</div>'''
form_foot='''
</body>
</html>'''
#if GET is requested it should display on next screen.
#else should load page.
if self.request.GET:
name= self.request.GET['name']
email= self.request.GET['email']
system= self.request.GET['system']
genre= self.request.GET['genre']
subscribe= self.request.GET['subscribe']
#displays form information submitted by user.
self.response.write(form_head + "<div class='maincontainer'>" +
'<h1>Thanks for Subbing!</h1>' +
'<div id="infobox">' +
'<h2></h2>' +
"Name: "+name+"<br />" +
"Email: "+email+"<br />" +
"Preferred System: "+system+"<br /> " +
"Preferred Genre: "+genre+
'</div>' +
'</div>' +
form_foot)
#Will display error. ** PLACE HOLDER **
else:
self.response.write("Help! Error!")
# Do not touch this.
app = webapp2.WSGIApplication([
('/', MainHandler)
], debug=True)
Here's your code properly indented (as far as I can tell).
I've updated my previous answer to show how to usetextwrap.dedent()to remove excess indentation often required to make large in-lined text blocks mixed with indented code more readable. In addition, I modified the self.response.write() statement near the end to show a cleaner way of substituting multiple text variable values into a longish string.
import textwrap
import webapp2
class MainHandler(webapp2.RequestHandler):
def get(self):
#web page sections
form_head=textwrap.dedent('''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>Gamers R' Us Subscribing</title>
</head>
<body>''')
form_body=textwrap.dedent('''
<div class="maincontainer">
<h1>Welcome to Gamers R' Us!</h1>
<div id="bgimg">
<p>Filler atm.</p>
<div id="formbox">
<h2>Subscribe Today!</h2>
<form method="GET">
<label>Full Name: </label><input type="text" name="name" placeholder=" John Doe"/><br>
<label>Email: </label><input type="text" name="email" placeholder=" me#domain.com"/><br>
<select name="system" class="selectbox">
<option value="ps4">Playstation 4</option>
<option value="xbone">Xbox One</option>
<option value="wiiu">Wii U</option>
<option value="pc">PC Gaming</option>
</select><br>
<input type="radio" name="genre" value="FPS">First Person Shooter.<br>
<input type="radio" name="genre" value="MOBA">Multiplayer Online Battle Arena.<br>
<input type="radio" name="genre" value="RPG">Role-Playing Game.<br>
<input type="radio" name="genre" value="RTS">Real Time Strategy.<br>
<input type="radio" name="genre" value="Other">Other Genre.<br>
<input type="checkbox" name="subscribe" value="yes" checked>Subscribe for gaming updates and more!<br>
<input type="submit" class="subbtn" value="Done" />
</form>
</div>
</div>
</div>''')
form_foot=textwrap.dedent('''
</body>
</html>''')
#if GET is requested it should display on next screen.
#else should load page.
if self.request.GET:
name=self.request.GET['name']
email=self.request.GET['email']
system=self.request.GET['system']
genre=self.request.GET['genre']
subscribe=self.request.GET['subscribe']
#displays form information submitted by user.
self.response.write(form_head +
textwrap.dedent('''
<div class='maincontainer'>
<h1>Thanks for Subbing!</h1>
<div id="infobox">
<h2></h2>
Name: {name}<br />
Email: {email}<br />
Preferred System: {system}<br />
Preferred Genre: {genre}
</div>
</div>''').format(**locals()) +
form_foot)
#Will display error. ** PLACE HOLDER **
else:
self.response.write("Help! Error!")
# Do not touch this.
app = webapp2.WSGIApplication([('/', MainHandler)], debug=True)