Я отображаю три отдельные формы, основанные на том, какая из трех кнопок нажата в верхней части веб-страницы. Когда я обновляю sh страницу, показываются все три формы, одна под другой. Когда я нажимаю «один», первая (самая короткая) форма показывает себя хорошо, но если я нажимаю «два» или «три», все исчезает под кнопками. Когда я нажимаю эту кнопку, отображается только форма «один», и я не уверен, как сделать так, чтобы «форма два» или «форма три» отображались самостоятельно при нажатии соответствующей кнопки.
Я включил мои html и python (так как эти формы отправляют информацию в сценарий python, который при запуске вводит данные формы в качестве пользовательских данных).
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()
Дополнительное примечание: я попытался «расширить» самую короткую форму дополнительными полями, когда пользователь запрашивает другое животное, вместо создания трех отдельных форм. Но я продолжаю получать неверные запросы, отправляя входные данные формы в сценарий python (поскольку скрытые поля считаются незаполненными, когда я отправляю форму одного животного с двумя и тремя скрытыми полями, например).
Вот некоторые вопросы и ресурсы, которые я исследовал, которые привели меня к этой точке:
Передача ввода от html к python и обратно
flask обрабатывать форму с переключателями
Flask Ошибка: «Метод не разрешен Метод не разрешен для запрошенного URL»
w3schools: jquery_hide_show
Плюс несколько других "как скрыть / показать элементы с JS", прежде чем я решил go с тремя отдельными формами.
Заранее спасибо.