单击按钮后不会显示隐藏的表单

时间:2019-09-06 19:54:57

标签: javascript jquery html css

单击按钮时,我试图显示隐藏的表单。但是,我不明白为什么它没有显示出来。

我尝试了以下代码

$(document).ready(function() {
  $("#button_id").click(function() {
    $("#form_id").show(); //Form shows on button click
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Myapp</title>
  <script type="text/javascript">
  </script>
</head>

<body>
  <input type="button" name="button" value="button" id="button_id" onclick="ready();">
  <form id="form_id" action="" method="POST" style="display:none;">
    <input type="id" name="login[id]" placeholder="id"><br>
    <input type="username" name="login[username]" placeholder="username"><br>
    <input type="password" name="login[password]" placeholder="password"><br>
    <input type="submit" name="submit" class="submit">
  </form><br>

</body>

</html>

1 个答案:

答案 0 :(得分:0)

从该按钮的HTML中删除onclick="ready();",因为该属性是:

  1. 不需要,因为您已经使用JQuery设置了click处理程序。
  2. 引用了不存在的ready()函数并导致错误。

$(document).ready(function() {
  $("#button_id").click(function() {
    $("#form_id").show(); //Form shows on button click
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <input type="button" name="button" value="button" id="button_id">
  <form id="form_id" action="" method="POST" style="display:none;">
    <input type="id" name="login[id]" placeholder="id"><br>
    <input type="username" name="login[username]" placeholder="username"><br>
    <input type="password" name="login[password]" placeholder="password"><br>
    <input type="submit" name="submit" class="submit">
  </form>