两个提交按钮一个形成两个不同的目的

Question

我在表单中有两个提交按钮。第一个按钮不会触发，而第二个按钮不触发。第二个按钮默认隐藏，仅在用户单击跨度时显示。我有一种感觉，JavaScript在弄乱事物方面发挥作用，但我不知道自己做错了什么。任何帮助都会很棒。

HTML文件代码

  <form action="login.php" method="post">     
      <span style="cursor:pointer;" onclick='showSecondButton();' href="#">Forgot your login details?</span>
      //first button
      <input id='loginButton'  type="submit" name='loginNow' value="Login">
      //second button (hidden by default)
      <input id='newButton'  type="submit" name='recoverPassword' style='display:none; ' value="Recover Account">
  </form>

PHP档案

if(isset($_POST['loginNow'])){//does not fire
    //login user
}
if(isset($_POST['recoverPassword'])){//fires
    //recover password
}

JS档案

<script>
    function showSecondButton(){
        document.getElementById("loginButton").style.display = "none";
        document.getElementById("newButton").style.display = "block";
    }
</script>