I am displaying three separate forms based on which one of three buttons is clicked at the top of a webpage. When I refresh the page, all three forms show, one under the other. When I click 'one,' the first (shortest) form shows alone fine, but if I click 'two' or 'three,' everything disappears underneath the buttons. Only the 'one' form is showing whenever I click that button, and I'm not sure how to make 'form two' or 'form three' show on their own with their respective button clicks.
I have included my html and python (as these forms send information to a python script that will take the form inputs as user inputs to run).
custom.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Fill out one of three forms</title>
<link rel="stylesheet" type="text/css" href="../static/css/style2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="../static/materialize/js/materialize.js"></script>
<script src="../static/js/app.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../static/materialize/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../static/materialize/css/materialize-social.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script>
$(document).ready(function() {
$("#one").click(function() {
$("#one_animal").show();
$("#two_animals").hide();
$("#three_animals").hide();
});
$("#two").click(function() {
$("#one_animal").hide();
$("#two_animals").show();
$("#three_animals").hide();
});
$("#three").click(function() {
$("#one_animal").hide();
$("#two_animals").hide();
$("#three_animals").show();
});
});
</script>
</head>
<body>
<h5 style="color:white">How many animals do you want to include?</h5>
<div class="container">
<div class="row">
<button id="one" class="btn waves-effect waves-light">1 animal</button>
<button id="two" class="btn waves-effect waves-light">2 animals</button>
<button id="three" class="btn waves-effect waves-light">3 animals</button>
</div>
</div>
<!-- ONE ANIMAL FORM -->
<form id="one_animal" action="/form_input_one" method="post">
<h5 style="color:white">What species are you looking for?</h5>
<div><input type="text" name="species" style="color:white">
<h5 style="color:white">Is there something about this animal you''re interested in?</h5>
<p>
<label>
<input name="features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<button class="btn waves-effect waves-light btn-large" type="submit" name="form" value="Submit">Submit
<i class="material-icons right">send</i>
</button>
</form>
<!-- TWO ANIMAL FORM -->
<form id="two_animals" action="/form_input_two" method="post">
<h5 style="color:white">What species are you looking for?</h5>
<div><input type="text" name="species" style="color:white">
<h5 style="color:white">Is there something about this animal you''re interested in?</h5>
<p>
<label>
<input name="features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<h5 style="color:white">What second animal are you looking for?</h5>
<input type="text" name="second_species" style="color:white">
<h5 id="second_species2" style="color:white">Is there something about this second animal you''re interested in?</h5>
<p>
<label>
<input name="second_features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="second_features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="second_features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<button class="btn waves-effect waves-light btn-large" type="submit" name="form" value="Submit">Submit
<i class="material-icons right">send</i>
</button>
</form>
<!-- THREE ANIMAL FORM -->
<form id="three_animals" action="/form_input_three" method="post">
<h5 style="color:white">What species are you looking for?</h5>
<div><input type="text" name="species" style="color:white">
<h5 style="color:white">Is there something about this animal you''re interested in?</h5>
<p>
<label>
<input name="features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<h5 style="color:white">What second animal are you looking for?</h5>
<input type="text" name="second_species" style="color:white">
<h5 style="color:white">Is there something about this second animal you''re interested in?</h5>
<p>
<label>
<input name="second_features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="second_features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="second_features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<h5 style="color:white">What third animal are you looking for?</h5>
<input type="text" name="third_species" style="color:white">
<h5 style="color:white">Is there something about this third animal you''re interested in?</h5>
<p>
<label>
<input name="third_features" type="radio" value="size" />
<span style="color:white">Size</span>
</label>
</p>
<p>
<label>
<input name="third_features" type="radio" value="sex" />
<span style="color:white">Sex</span>
</label>
</p>
<p>
<label>
<input name="third_features" type="radio" value="color" />
<span style="color:white">Color</span>
</label>
</p>
<button class="btn waves-effect waves-light btn-large" type="submit" name="form" value="Submit">Submit
<i class="material-icons right">send</i>
</button>
</form>
</body>
</html>
main.py
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route('/form_input_one', methods=['POST'])
def form_input_one():
species = request.form['species']
features = request.form['features']
return 'First species? %s <br/> Features? %s <br/> <a href="/">Back Home</a>' % (species, features)
@app.route('/form_input_two', methods=['POST'])
def form_input_two():
species = request.form['species']
features = request.form['features']
second_species = request.form['second_species']
second_features = request.form['second_features']
return 'First species? %s <br/> Features? %s <br/> Second species? %s <br/> Second features? %s <br/> <a href="/">Back Home</a>' % (species, features, second_species, second_features)
@app.route('/form_input_three', methods=['POST'])
def form_input_three():
species = request.form['species']
features = request.form['features']
second_species = request.form['second_species']
second_features = request.form['second_features']
third_species = request.form['third_species']
third_features = request.form['third_features']
return 'First species? %s <br/> Features? %s <br/> Second species? %s <br/> Second features? %s <br/> Third species? %s <br/> Third features? %s <br/> <a href="/">Back Home</a>' % (species, features, second_species, second_features, third_species, third_features)
@app.route("/")
def index():
return render_template('index.html')
@app.route("/custom.html")
def custom():
return render_template('custom.html')
if __name__ == "__main__":
app.run()
Additional note: I have tried 'extending' the shortest form with additional fields when the user requests another animal, instead of creating three separate forms. But I keep getting bad requests sending the form inputs to the python script (since hidden fields are considered not filled in when I submit a one animal form with two and three fields still hidden, for example).
These are some questions and resources I have researched that have gotten me to this point:
Passing input from html to python and back
flask handle form with radio buttons
Flask Error: “Method Not Allowed The method is not allowed for the requested URL”
Plus a handful of other "how to hide/show elements with JS" before I decided to go with three separate forms.
Thanks in advance.
