Hide/reveal 按钮点击的不同形式 | Google 应用引擎

Question

我正在显示三个单独的表单，基于在网页顶部单击三个按钮之一。当我刷新页面时，所有三种形式都会显示，一个在另一个下面。当我单击 'one,' 时，第一个（最短的）表单单独显示正常，但如果我单击 'two' 或 'three,'，按钮下方的所有内容都会消失。每当我单击该按钮时，只会显示 'one' 表单，而且我不确定如何使 'form two' 或 'form three' 通过各自的按钮单击自行显示。

我已经包含了我的 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()

附加说明：当用户请求另一种动物时，我尝试了 'extending' 带有附加字段的最短表单，而不是创建三个单独的表单。但是我不断收到错误的请求，将表单输入发送到 python 脚本（因为当我提交一个仍然隐藏两个和三个字段的单一动物表单时，隐藏字段被认为未填写，例如）。

这些是我研究过的一些问题和资源，它们让我走到了这一步：

Flask Error: “Method Not Allowed The method is not allowed for the requested URL”

w3schools: jquery_hide_show

加上一些其他 "how to hide/show elements with JS"，然后我决定使用三种不同的表格。

提前致谢。

Answer 1

您有 3 个 div 标签未在

处关闭

<div><input type="text" name="species" style="color:white">

关闭标签后代码正常运行：

<!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></div>
    </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></div>
    </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></div>
    </form>

  </body>

  </html>

Hide/reveal 按钮点击的不同形式 | Google 应用引擎

Hide/reveal different forms from button click | Google App Engine

html

python

forms

show-hide

flask