I have a simple log in screen that is a sticky form . I am trying to get the log in boxes to turn red when the form is submitted but the input field is left blank. I am getting some really strange behaviour where two of the fields do this correctly and others seem to be random.The photo on the left below shows what happens after the page loads and submit is hit. The second photo on the right shows the 'random' behaviour after I enter some details- hit submit, and then go back and delete these details and resubmit again. All the data is stored in php global variables i.e. not from database at present.
<!doctype html>
<html>
<head>
<title>Sign Up Report</title>
<meta charset= "utf-8">
<link type="text/css" rel="stylesheet" href="login.css">
</head>
<body>
<?php
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$address = $_POST['address'];
$city = $_POST['city'];
$zip = $_POST['zip'];
$email = $_POST['email'];
$telephone = $_POST['telephone'];
$presentForm = false;
$user = $_POST['user'];
$level = implode(", ",$_POST['level']);
$subjects = implode(", ",$_POST['subject']);
$required="";
$userError = "" ;
$levelError = "" ;
$subjectsError = "" ;
$errorMessage="";
//check to see if the form has been submitted and that all the required data is present if so then report success to user
if(isset($_POST['submit']))
{
if (((!empty($firstName))) && ((!empty($lastName))) && ((!empty($address))) && ((!empty($city))) && ((!empty($email))) && ((!empty($telephone))) && ((!empty($zip))) && ((!empty($level))) && ((!empty($subjects))))
{
echo '<style> h1 {text-decoration: none; margin-left:20px;} #confirmation { background-color: white; border: solid black 2px; margin: 15px; background-image: url("../Images/tutorTeam.png") } p {color:blue; margin-left: 10; padding:10px; } li { margin-left: 15px; } img { padding: 20px;}</style>';
echo '<h1>Thank you ' . $firstName . ' for signing up!</h1>';
echo '<div id="confirmation">';
echo '<p>Please review the following details to ensure they are correct: </p>';
echo '<li>You are a <b>' . $user . '</b></li><br>';
echo '<li>Your address is <b>' . $address . $city . $zip .'</b></li><br>';
echo '<li>Your contact number is <b>' . $telephone . '</b></li><br>';
echo '<li>Your email is <b>' . $email . '</b></li><br>';
echo '<li>The subject(s) you selected- <b>' . $subjects . '</b></li><br>';
echo '<li>Your tuition level(s) <b>' . $level . '</b></li>';
echo '<a href="../index.html"><img src="../Images/confirm.png" id="return"></a>';
echo '<a href="tutorSignUp.php"><img src="../Images/edit.png" id="return"></a>';
echo '</div>';
$presentForm = false;
}else{
$presentForm=true;
$required = "req";
$levelError = "level selection required" ;
$subjectsError = "subject selection required" ;
$errorMessage="Please enter the data that is missing to sign up";
}
}
if(!isset($_POST['submit']))
{
$presentForm=true;
}
if($presentForm)
{
?>
<div id="container">
<section id="top">
<a href="../index.html">
<img id="back" src="../images/back.png" height="40px">
</a>
<img id="logo" src="../images/tutorTeamLogo.png" height="40px">
</section>
<section id="main">
<p><span class="error"><?php echo $errorMessage?></span> </p>
<p>Are you a tutor or customer? </p>
<form method="POST" action=" <?php echo $_SERVER['PHP_SELF']; ?>" >
<select name="user">
<option value="Customer">Customer</option>
<option value="Tutor">Tutor</option>
</select>
<p>Please complete to sign up.</p>
<section id="details">
<div class="tablerow">
<p>First name:</p>
<p><input class="inputBox <?php if(empty($firstName) && (isset($_POST['submit']))) echo 'errorBox' ?> " type="text" name="firstName" value="<?php echo $firstName; ?>" ></p>
<span class="error">* <?php echo $required;?></span>
</div>
<div class="tablerow">
<p>Last name:</p>
<p><input class="inputBox <?php if(empty($lastName) && (isset($_POST['submit']))) echo 'errorBox' ?> " type="text" name="lastName" value="<?php echo $lastName; ?> "></p>
<span class="error">* <?php echo $required;?></span>
</div>
<div class="tablerow">
<p>Address:</p>
<p><input class="inputBox <?php if(empty($address) && (isset($_POST['submit']))) echo 'errorBox' ?> " type="text" name="address" value="<?php echo $address; ?> "></p>
<span class="error">* <?php echo $required;?></span>
</div>
<div class="tablerow">
<p>city: </p>
<p><input class="inputBox <?php if(empty($city) && (isset($_POST['submit']))) echo 'errorBox' ?> " type="text" name="city" value="<?php echo $city; ?> "></p>
<span class="error">* <?php echo $required; ?></span>
</div>
<div class="tablerow">
<p>Zip: </p>
<p> <input class="inputBox <?php if(empty($zip) && (isset($_POST['submit']))) echo 'errorBox' ?> " type="text" name="zip" value="<?php echo $zip; ?> "></p>
<span class="error">* <?php echo $required; ?></span>
</div>
<div class="tablerow">
<p>Telephone:</p>
<p><input class="inputBox <?php if(empty($telephone) && (isset($_POST['submit']))) echo 'errorBox' ?> " type="tel" name="telephone" value="<?php echo $telephone; ?> "></p>
<span class="error">* <?php echo $required; ?></span>
</div>
<div class="tablerow">
<p>Email:</p>
<p><input class="inputBox <?php if(empty($email) && (isset($_POST['submit']))) echo 'errorBox' ?> " type="text" name="email" value="<?php echo $email; ?>"></p>
<span class="error">* <?php echo $required; ?></span>
</div>
</section>
<img src="../Images/dubaiZones.png" id="dubaiMap">
<p>Tutoring level <span class="error">* <?php echo $levelError;?> </span> </p>
<input type="checkbox" name="level[]" value="Nursery" >Nursery<br>
<input type="checkbox" name="level[]" value="Primary" >Primary<br>
<input type="checkbox" name="level[]" value="Secondary" >Secondary<br>
<input type="checkbox" name="level[]" value="ALevel" >College/A Level <br>
<input type="checkbox" name="level[]" value="Undergraduate" >Undergraduate<br>
<input type="checkbox" name="level[]" value="Postgraduate" >Postgraduate<br>
<p> Subject specialism(s)<span class="error">* <?php echo $subjectsError;?></span></p>
<input type="checkbox" name ="subject[]" value="English">English<br>
<input type="checkbox" name ="subject[]" value="Maths">Maths<br>
<input type="checkbox" name ="subject[]" value="Physics">Physics<br>
<input type="checkbox" name ="subject[]" value="Chemistry">Chemistry<br>
<input type="checkbox" name ="subject[]" value="Biology">Biology<br>
<input type="checkbox" name ="subject[]" value="History">History<br>
<input type="checkbox" name ="subject[]" value="Geography">Geography<br>
<input type="checkbox" name ="subject[]" value="Religious Studies">R.E.<br>
<input type="checkbox" name ="subject[]" value="French">French<br>
<input type="checkbox" name ="subject[]" value="German">German<br>
<input type="checkbox" name ="subject[]" value="Spanish">Spanish<br>
<input type="checkbox" name ="subject[]" value="Computing">Computing<br>
<input type="checkbox" name ="subject[]" value="Business">Business<br>
<input type="checkbox" name ="subject[]" value="Economics">Economics<br>
<input type="checkbox" name ="subject[]" value="Classics">Classics<br>
<input type="checkbox" name ="subject[]" value="Music">Music<br>
<input type="checkbox" name ="subject[]" value="Art">Art<br>
<input type="checkbox" name ="subject[]" value="Art">Languages<br>
<br>
<textarea id="textArea" name="comments" rows="10" cols="48">Additional Information...</textarea>
<input type="submit" name="submit" value="submit" id="submit">
</form>
</section>
<br>
<br>
<br>
<footer>
<table id="tableContainer">
<tr id="end">
<td id="tableCell">Website design and coding provided by Technology in Learning 2016
Copyright Technology in Learning <img id="til" src="../Images/company.png" height="12" width="12">
</td>
</tr>
</table>
</footer>
</div>
<?php
}
?>
</body>
</html>
Here is the CSS file for reference
#container {
background-image: url(..//Images/backgroundPic.jpg);
margin-left:auto;
margin-right:auto;
background-size: cover;
width: 1000px;
border-style: ridge;
border-width: 5px;
}
h1,h2 {
text-decoration: underline;
}
p {
font-weight: bold;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
background-color: #F1EBEB;
}
/* Header */
#top{
padding: 0px;
margin: 0px;
background-color: white;
background-image: url(../images/tutorteam.png);
height: 50px;
width: 1000px;
font-size: 1em;
}
#top img {
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
}
#details{
display: table;
padding: 10px;
}
#details p{
display:table-cell;
vertical-align:top;
padding: 3px;
}
div.tablerow {
display:table-row
}
div.tablerow p:first-child {
text-align: right;
}
#logo {
float:right;
margin-left: 4px;
margin-top :2px;
}
#back
{
float: left;
margin-left: 40px;
margin-top: 2px;
}
#main {
padding: 10px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
background-color: white;
}
#tableContainer {
position: absolute;
left:300px;
bottom:-350px;
display:table;
margin-left: auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
border-spacing:10px;
font-size: 0.25em;
}
#footer {
display:table-row;
}
#tableCell {
display: table-cell;
vertical-align: top;
}
#dubaiMap {
float: right;
position: relative;
right: 20px;
top: -200px;
}
#signUp {
margin-left: 110px;
margin-bottom: 100px;
border: 0px;
padding: 0px;
height: 90px;
}
#submit {
float: right;
position: relative;
bottom: 60px;
left: 420px;
margin-left: 20px;
background-color: #4CAF50; /* Green */
border: 2px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
textarea {
float: right;
position: relative;
bottom: 250px;
right: 175px;
border: 3px solid #4CAF50;
font-size: 14px
}
.error {
color:red;
font-weight:normal;
}
input.errorBox{
background-color: #FCD9D9;
}
