title: Two submit buttons one form two different purposes
body: <p>I have two submit buttons within a form. The first button does not fire while the second one does. The second button is hidden by default and shown only if users click on the span. I have a feeling the JavaScript plays a role in messing things around but I don't know what I'm doing wrong. Any help would be awesome.</p>
  
  <p><code>HTML</code> File Code</p>
  
  <pre><code>  &lt;form action="login.php" method="post"&gt;     
        &lt;span style="cursor:pointer;" onclick='showSecondButton();' href="#"&gt;Forgot your login details?&lt;/span&gt;
        //first button
        &lt;input id='loginButton'  type="submit" name='loginNow' value="Login"&gt;
        //second button (hidden by default)
        &lt;input id='newButton'  type="submit" name='recoverPassword' style='display:none; ' value="Recover Account"&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p><code>PHP</code> file</p>
  
  <pre><code>if(isset($_POST['loginNow'])){//does not fire
      //login user
  }
  if(isset($_POST['recoverPassword'])){//fires
      //recover password
  }
  </code></pre>
  
  <p><code>JS</code> File</p>
  
  <pre><code>&lt;script&gt;
      function showSecondButton(){
          document.getElementById("loginButton").style.display = "none";
          document.getElementById("newButton").style.display = "block";
      }
  &lt;/script&gt;
  </code></pre>