禁用按钮直到输入密码/访问代码（PHP）

Question

编辑：对于不良措辞道歉，下面有一个更好的版本： 当用户首次访问该网站时，他们会看到i.stack.imgur.com/7zbyv.png。然后，他们必须输入设置密码（PHP变量）并单击“提交”。如果正确，i.stack.imgur.com/E78wK.png将显示。如果没有，什么都不会发生。

---

我正在开发网站上编写脚本。我希望用文本框和提交按钮替换大绿色按钮。用户必须在框中输入正确的密码，然后在显示绿色按钮之前单击提交按钮。我无法找到如何在任何地方执行此操作的指南。谁能帮我？我已将相关代码和屏幕截图放在下面：

绿色按钮：

<?php
    if(($xx != null) || $log != null)
    {
    echo "<a rel=\"tooltip\" title=\"Login via Instagram using your username\" class=\"btn btn-success\" href=\"$loginUrl\">Login with Instagram</a>";
    } 
?>

登录表单和按钮

<form>
        <br />
        <input type="password" class="input-small" placeholder="Enter Code...">
        <button type="submit" class="btn">Login</button>
</form>

Answer 1

非常简单 - 当用户未登录时，您同时输出表单和按钮。您使用CSS隐藏表单，只显示按钮。然后用户jQuery click()（或简单的javascript）处理程序切换按钮与表单。

以下是使用jQuery演示所述技术：http://jsfiddle.net/uHzfp/

Answer 2

<?php
    if(($xx != null) || $log != null)
    {
    echo "<a id="login_button" rel=\"tooltip\" title=\"Login via Instagram using your username\" class=\"btn btn-success\" href=\"$loginUrl\" >Login with Instagram</a>";
    } 
?>

<form id="myform" style="display:none;">
        <br />
        <input type="password" class="input-small" placeholder="Enter Code...">
        <button type="submit" class="btn">Login</button>
</form>

<script>
$("#login_button").click(function () {
$(this).css("display","none");
$('#myform').css("display","");
});
</script>