Hidereveal不同的形式从按钮点击显示元素与JS "之前,我决定用三个独立的形式。

Google App Engine

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).

<!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>

custom.html

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()

main.py

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”

w3schools: jquery_hide_show

Plus a handful of other “how to hide

解决方案:

你有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>

给TA打赏
共{{data.count}}人
人已打赏
未分类

Apache 2.4.43将我的url"? "改为"%3F"

2022-9-8 12:50:36

未分类

安卓。异步任务和用户界面

2022-9-8 12:50:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索