title: How can i have php execute change a html webpage with javascript
body: <p>So my setup is as follows:
  I have html code with multiple forms however JavaScript hides all but the "login" form.
  Upon submission I want php to validate the users input and if the input is valid i want javascript to display the previously hidden forms and hide the "login" form.</p>
  
  <p>What would be the best way to do this?, thanks in advance :)</p>
  
  <p>Also here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Encyrpion email&lt;/title&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /&gt;
          &lt;link rel="stylesheet" href="style.css"/&gt;
          &lt;link rel="icon" type="image/png" href="images/favicon.png"&gt;
          &lt;script src='https://www.google.com/recaptcha/api.js'&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt; 
              $(document).ready(function(){
              $("#flip").click(function(){
              $("#panel").slideToggle("medium");
                  });
              });
              document.getElementById('mail').style.display='none'
          &lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              function show(id){
                  document.getElementById(id).style.display = 'block';
              }
              function hide(id){
                  document.getElementById(id).style.display = 'none';
              }
          &lt;/script&gt;
          &lt;a href="#" onclick="show('mail'), hide('login'); return false;"&gt;Edit&lt;/a&gt;
          &lt;div id="login"&gt;
              &lt;form id="login" method="post" action="login.php"&gt;
                  &lt;label for="Username"&gt;Username&lt;/label&gt;
                  &lt;input class="input-hover-grey" type="text" name="Username" id="Username" required placeholder=""/&gt;
                  &lt;label for="Password"&gt;Password&lt;/label&gt;
                  &lt;input class="input-hover-grey" type="Password" name="Password" id="Password" required placeholder=""/&gt;
                  &lt;input class="input-hover-grey" type="submit" name="submit" value="Submit"&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;script&gt;switch('login','mail')&lt;/script&gt;
          &lt;div id="mail" style="display: none;"&gt;
              &lt;div class="row"&gt;
              &lt;div class="column"&gt;
                  &lt;br&gt;
                      &lt;div id="flip"&gt;
                          &lt;input class="input-hover-grey" value="More information" type="button"&gt;
                      &lt;/div&gt;
                      &lt;div id="panel"&gt;
                          &lt;p&gt;
                              This program allow you to encrypt and send messages trough a regualr email protocol.
                          &lt;/p&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="column"&gt;
                  &lt;form method="post" action="verify.php"&gt;
                      &lt;label for="message"&gt;Message&lt;/label&gt;&lt;br&gt;
                      &lt;textarea class="input-hover-grey" name="message" id="message" rows="4"&gt;&lt;/textarea&gt;
                      &lt;label for="Key" type="small"&gt;Key&lt;/label&gt;&lt;br&gt;
                      &lt;input class="input-hover-grey" type="number" name="=Key" id="Key" required placeholder=""/&gt;
                      &lt;br&gt;
                      &lt;input class="input-hover-grey" type="submit" name="submit" value="Encrypt"&gt;
                      &lt;input class="input-hover-grey" type="reset" value="Reset"/&gt;
                  &lt;/form&gt;
                      &lt;br&gt;
                  &lt;form method="post" action="verify.php"&gt; 
                      &lt;label for="sender"&gt;Senders email adress&lt;/label&gt;
                      &lt;input class="input-hover-grey" type="email" name="sender" id="sender" required placeholder="Enter a valid email address"/&gt;
                      &lt;label for="reciever"&gt;Recievers email adress&lt;/label&gt;
                      &lt;input class="input-hover-grey" type="email" name="reciever" id="reciever" required placeholder="Enter a valid email address"/&gt;
                      &lt;label for="Subject"&gt;Subject&lt;/label&gt;
                      &lt;input class="input-hover-grey" type="text" name="Subject" id="Subject" required placeholder=""/&gt;
                      &lt;p&gt;&lt;/p&gt;
                      &lt;div class="g-recaptcha" data-theme="dark" align="left" data-sitekey="6Le3DicUAAAAAKo4tSQAL6yhsfSna_MbLwpR4T0s" required&gt;&lt;/div&gt;
                      &lt;input class="input-hover-grey" type="submit" name="submit" value="Submit"&gt;
                      &lt;input class="input-hover-grey" type="reset" value="Reset"/&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the php:</p>
  
  <pre><code>&lt;?php
          if ($_POST['Username'] != "User") {
          echo "Invalid username";
          exit;
          }
          elif ($_POST['Password'] != "12345") {
          echo "Invalid password";
          exit;
          }
          else:
  ?&gt;
  </code></pre>