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