Question 250074 in PHP Question posted in
Official manual can be found here.

Php – select box border dosen't load colour correctly

I’m buillding a signup system. I have 3 select box’s of day month and year for a birthdate.
I’m trying to do so when you submit the information, it’ll check if the user choose a full date and it also checks if the user is older then 13. if he’s younger, or if he choose only a day and month, but not year for example, then the select box’s border will become red. The problem is that when I load the page even for the first time, the borders of the day and year boxs are already red. here’s the code. what’s the problem?

<?php
$currentDate = (null);
$date = (null);
$usersday = (null);
$usersyear = (null); 
$usersmonth = (null);
$diff = (null);
$users_age = (null);
if (isset($_POST['submit-button'])) {
    $usersday = (int)$_POST['day']; 
    $usersyear = (int)$_POST['year']; 
    $usersmonth = (int)$_POST['month'];
    $date = new DateTime("$usersyear-$usersmonth-$usersday");
    $today = new DateTime('today');
    $diff = $today->diff($date);
    $users_age = $diff->format('%y');
};
?>
<!DOCTYPE html>
<html>
<head>
<?php
if (($usersday !== null) || ($usersmonth !== null) || ($usersyear !== null) || ($users_age < 
13)) {
        $date = (null);
        echo
        "#month {
        border-color: #ff0000;
        }";
        echo
        "#day {
        border-color: #ff0000;
        }";
        echo
        "#year {
        border-color: #ff0000;
        }";
        echo
        ".birthday-label {
        color: #ff0000;
        }";
    }
    ?>
    </style>
</head>
<body>
<div class="input-group">
            <select id="day" name="day" autocomplete="off" class="select-box">
                <option hidden selected selected value="0" >Day</option>
                <?php
                for ($i = 1; $i <= 31; $i++) {
                echo "<option value="$i">$i</option>";
                }
                ?>
                </select>
                <select id="month" name="month" autocomplete="off" class="select-box">
                <option hidden selected value="0" >Month</option>
                <option id="jan" value="1">Jan</option>
                <option id="feb" value="2">Feb</option>
                <option id="mar" value="3">Mar</option>
                <option id="apr" value="4">Apr</option>
                <option id="may" value="5">May</option>
                <option id="jun" value="6">Jun</option>
                <option id="jul" value="7">Jul</option>
                <option id="aug" value="8">Aug</option>
                <option id="sep" value="9">Sep</option>
                <option id="oct" value="10">Oct</option>
                <option id="nov" value="11">Nov</option>
                <option id="dec" value="12">Dec</option>
            </select>
            <select id="year" name="year" autocomplete="off" class="select-box">
                <option hidden selected value="0" >Year</option>
                <?php
                for ($i = 2023; $i >= 1900; $i--) {
                    echo "<option value="$i">$i</option>";
                }
                ?>
            </select>
        </div>
</body>
</html>

a picture of the page when I load it

Tags:

2

Answers


  1. 0

    This is happening because the PHP code responsible for setting the border colors is executed when the page loads, and since your variables like $usersday and $usersyear are initially set to null, the conditions for setting the border color are met right away.

    Login or Signup to reply.
  2. 0

    To fix this issue, you should only apply the red border color when the form is submitted and the conditions are met. You can do this by moving the CSS code that sets the border color inside the conditional block that checks for the form submission. Here’s an updated version of your code:

    <!DOCTYPE html>
<html>
<head>
<style>
<?php
$currentDate = null;
$date = null;
$usersday = null;
$usersyear = null; 
$usersmonth = null;
$diff = null;
$users_age = null;

if (isset($_POST['submit-button'])) {
$usersday = (int)$_POST['day']; 
$usersyear = (int)$_POST['year']; 
$usersmonth = (int)$_POST['month'];
$date = new DateTime("$usersyear-$usersmonth-$usersday");
$today = new DateTime('today');
$diff = $today->diff($date);
$users_age = $diff->format('%y');

if ($usersday !== null || $usersmonth !== null || $usersyear !== null || 
    $users_age < 13) {
        echo "
        #month, #day, #year {
            border-color: #ff0000;
        }
        .birthday-label {
            color: #ff0000;
        }";
    }
}
?>
</style>
</head>
<body>
<div class="input-group">
    <form method="post" action="">
        <select id="day" name="day" autocomplete="off" class="select-box">
            <option hidden selected selected value="0" >Day</option>
            <?php
            for ($i = 1; $i <= 31; $i++) {
                echo "<option value="$i">$i</option>";
            }
            ?>
        </select>
        <select id="month" name="month" autocomplete="off" class="select- 
box">
            <option hidden selected value="0" >Month</option>
            <!-- Rest of your month options -->
        </select>
        <select id="year" name="year" autocomplete="off" class="select- 
box">
            <option hidden selected value="0" >Year</option>
            <!-- Rest of your year options -->
        </select>
        <input type="submit" name="submit-button" value="Submit">
    </form>
</div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search