Form values variables and submission problems - php

Question

Can someone help me fix this code? What I want to fix is:
If a person doesn't enter a username or password, I just want the error text (the red messages on the side) without the 'sorry, no access' message on top.
Also, if a person gains access (or doesn't), I want the text fields and submit button go away.
This isn't going to be a real form, so please don't worry about how I'm using a username and password....and if its possible do you think most of my code could stay the same?
Thanks!
<?php
echo '<style type="text/css">
.error
{
color: red;
}
</style>';
$error = false;
if (isset($_POST['submitted']))
{
if (empty($_POST['username']) || empty($_POST['password']))
{
$error = TRUE;
}
if (!$error && $_POST['username']=='test' && $_POST['password']=='abc123') {
echo '<p>Correct. Thank you for entering.<p/>';
}
else
{
echo '<p>Sorry, no access.</p>
';
}
}
?>
<form action="" method="post">
Username: <input type="text" name="username" size="20" value="<?php
if (isset($_POST['submitted']) && !empty($_POST['username']))
{
echo $_POST['username'];
} ?>" />
<?php
if (isset($_POST['submitted']) && empty($_POST['username']))
{
echo '<span class="error">Please enter a username.</span>';
}
?>
<br />Password: <input type="password" name="password" size="20" value="<?php
if (isset($_POST['submitted']) && !empty($_POST['password']))
{
echo $_POST['password'];
} ?>" />
<?php
if (isset($_POST['submitted']) && empty($_POST['password']))
{
echo '<span class="error">Please enter a password.</span>';
}
?>
<br /><input type="submit" value="Log in" />
<br /><input type="hidden" name="submitted" value="true" />
</form>

Answer 1

Try this:
<style type="text/css">
.error {
color: red;
}
</style>
<?php
$submitted = isset($_POST['submitted']);
$userName = isset($_POST['username']) ? $_POST['username'] : null;
$password = isset($_POST['password']) ? $_POST['password'] : null;
if($submitted) {
if (!$userName || !$password) {
echo '<p class="error">Please go back and fill the inputs.</p>';
} elseif($userName == 'test' && $password == 'abc123') {
echo '<p>Correct. Thank you for entering.<p/>';
} else {
echo '<p class="error">Sorry, no access.</p>';
}
} else {
?>
<form action="" method="post">
Username: <input type="text" name="username" size="20" value="<?php echo $userName; ?>" />
<br />
Password: <input type="password" name="password" size="20" value="" />
<br /><input type="submit" value="Log in" />
<br /><input type="hidden" name="submitted" value="true" />
</form>
<?php } ?>

Answer 2

Consider using the onSubmit event on your form.
You need to combine php and javascript here in order to prevent it from submitting. Make a Jscript function that's called by onSubmit. If a value isn't filled in, return false. It'll kill the submit button and print out directly on the screen.
So just take this:
$submitted = isset($_POST['submitted']);
$userName = isset($_POST['username']) ? $_POST['username'] : null;
$password = isset($_POST['password']) ? $_POST['password'] : null;
if($submitted)
{
if (!$userName || !$password) {
echo '<p class="error">Please go back and fill the inputs.</p>';
}
}
And then on your form:
<form action="" method="post" onSubmit="checkForm()">
Then figure out how you're going to check the form with javascript. You can piece together the rest.