单击按钮时不显示表单答案

【问题标题】：Form not displaying on button click单击按钮时不显示表单
【发布时间】：2022-01-05 18:15:39
【问题描述】：

尝试显示单击“登录”按钮后出现的登录表单，但该按钮未实现。

这是我尝试过的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    $("#s1").click(function(){
  $("form").show();
});
});
</script>

<body>
    <form action="f1.py" method="post">
        <button id="s1">Sign In</button>
    <div>
        <label for "lid">ID:</label>
        <input type="text" id="logid" required>
    </div>
    <div>
        <label for "psw">Password:</label>
        <input type="password" id="psw1" required> 
    </div>
    </form>

</div>

【问题讨论】：

您将使用/div 关闭您的body 标签。我不确定这是否会导致您的问题，但这没有帮助。

标签： html jscript

【解决方案1】：

你可以试试这个：

$(document).ready(function()
 {
    $("#s1").click(function()
    {
         $("form").toggle(500);
    });
 });

【讨论】：

【解决方案2】：

您一开始并没有隐藏表单。考虑一下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#s1").click(function(){
            $("form").css('display','block');
        });
    });
</script>
<body>
    <button id="s1">Sign in</button>
    <form style="display:none;" action="f1.py" method="post">
        <button id="s1">Sign In</button>
    <div>
        <label for "lid">ID:</label>
        <input type="text" id="logid" required>
    </div>
    <div>
        <label for "psw">Password:</label>
        <input type="password" id="psw1" required> 
    </div>
    </form>
    

</body>

编辑：正如 mrmonsieur 在 cmets 中提到的那样，您的结束正文标签是错误的

【讨论】：