Question

我想用HTML创建一个表单，该表单可以由用户使用插入的名称，然后在按下Submit之后向该用户显示对应的值（Age）。这是我的代码：

<!DOCTYPE html>
  <html lang="en">
   <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" type="text/css" href="MyMain.css">
       <script language="JavaScript">
        function myFunction() {
            document.getElementById('myshow').innerHTML = 
                        document.getElementById("Name").value;
          }
       </script>
   </head>
   <body>
      <div class="container">
            <div>
              <fieldset>
                <form action="">
                  <div class="row">
                    <div form-group">
                      <label for="fname">Your Name: </label>
                      <input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
                    </div>
                    </div>
                    <div>
                      <input type="submit" class="button" onclick="myFunction();" value="Submit"<br/>
                    </div>
                  </div>

                </form>

              </fieldset>
            </div>
      </div>
      <div class="container">
      <fieldset>
        <div>
            <label>Age: </label>
            <p><span id='myshow'></span></p>
        </div>
      </fieldset>
     </div>
   </body>
</html>

问题在于，按下提交后，名称将显示在myshow span部分（年龄：）中一秒钟的时间，然后消失，URL更改为localhost:5000/?Name=Jack而不是localhost:5000/the current path/?Name=Jack

Answer 1

您应该在form元素上使用onSubmit来调用该函数，然后返回false。

   <!DOCTYPE html>
  <html lang="en">
   <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" type="text/css" href="MyMain.css">
       <script language="JavaScript">
        function myFunction() {
            document.getElementById('myshow').innerHTML = 
                        document.getElementById("Name").value;

             return false;
          }
       </script>
   </head>
   <body>
      <div class="container">
            <div>
              <fieldset>
                <form action="" onSubmit="return myFunction();">
                  <div class="row">
                    <div form-group">
                      <label for="fname">Your Name: </label>
                      <input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
                    </div>
                    </div>
                    <div>
                      <input type="submit" class="button" value="Submit"><br/>
                    </div>
                  </div>

                </form>

              </fieldset>
            </div>
      </div>
      <div class="container">
      <fieldset>
        <div>
            <label>Age: </label>
            <p><span id='myshow'></span></p>
        </div>
      </fieldset>
     </div>
   </body>
</html>

Ps：您没有正确关闭Submit标签

Answer 2

我认为您不需要提交。
如果您不需要提交，则必须更改此代码。

<!DOCTYPE html>
  <html lang="en">
   <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" type="text/css" href="MyMain.css">
       <script language="JavaScript">
        function myFunction() {
            document.getElementById('myshow').innerHTML = 
                        document.getElementById("Name").value;
          }
       </script>
   </head>
   <body>
      <div class="container">
            <div>
              <fieldset>
                  <div class="row">
                    <div form-group">
                      <label for="fname">Your Name: </label>
                      <input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
                    </div>
                    </div>
                    <div>
                      <input type="button" class="button" onclick="myFunction();" value="Submit"<br/>
                    </div>
                  </div>
              </fieldset>
            </div>
      </div>
      <div class="container">
      <fieldset>
        <div>
            <label>Age: </label>
            <p><span id='myshow'></span></p>
        </div>
      </fieldset>
     </div>
   </body>
</html>

插入值在按提交后消失

2 个答案: