PHP逻辑检查无法调整CSS类

时间:2017-02-02 22:53:41

标签: php css

我有一个简单的登录屏幕,它是一种粘性形式。我正在尝试在提交表单时让登录框变为红色,但输入字段留空。我得到了一些非常奇怪的行为,其中两个字段正确执行此操作,而其他字段似乎是随机的。左下方的照片显示了在页面加载和提交命中后会发生什么。右边的第二张照片显示了我输入一些详细信息 - 提交后的“随机”行为,然后返回并删除这些详细信息并重新提交。所有数据都存储在php全局变量中,即不存在于目前的数据库中。

after submit is hit enter image description here

 <!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>

以下是供参考的CSS文件

#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;

}

1 个答案:

答案 0 :(得分:0)

好的,感谢任何看过这个的人。我是PHP的新手,所以请原谅。我通过代码逐字逐行地发现了问题。

此代码无效,并在传递逻辑检查时产生了不显示红色的不需要的响应:

<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>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>

稍后提起了几个小时的挫折并让几个人进行审查,他们也找不到任何东西......答案,看看非工作代码的最后部分与正确的工作代码相关联!

"<?php echo $zip; ?> "> 
"<?php echo $zip; ?>"  

我非常尊重使用这种语言编程的任何人。我猜测产生的错误是因为不在字符串末尾留下空字符以避免SQL注入攻击?