单击输入时如何使用PHP更改HTML元素的类标签

Question

First of all I cannot use JavaScript for this. As part of this homework we can only use PHP.

My current code listens for a input type="submit" post and then checks if some text inputs are empty or have something in them. Currently it will just echo some text which works.

What I want is for the class tag on the input text fields to change based on whether they're full or not.

Bellow is my current code:

<?php
        $statusCodeClass='class="form-control"';
        $statusTextClass='class="form-control"';

        // Are all fields fill
        if(isset($_POST['post'])){
            checkStatusCodeIsEmpty();
            checkStatusTextIsEmpty();

            //Check if the fields are empty
            if(checkStatusCodeIsEmpty() && checkStatusTextIsEmpty()){
                echo "move to the next page";
            }else{
                echo "not correct yet";
            }           
        }

        function checkStatusCodeIsEmpty(){
            if(empty($_POST['statusCode'])){
                $statusCodeClass='class="form-control is-invalid"';
                return false;
            }else{
                $statusCodeClass='class="form-control is-valid"';
                return true;
            }
        }
        function checkStatusTextIsEmpty(){
            if(empty($_POST['statusText'])){
                $statusTextClass='class="form-control is-invalid"';
                return false;
            }else{
                $statusTextClass='class="form-control is-valid"';
                return true;
            }
        }
    ?>

    <!-- Whole page -->
    <div class="container-fluid px-lg-5">
        <h1>Status Posting System</h1>
        <form method="post">
            <!-- Status code group. This has the label and input -->
            <div class="form-group row">
                <label for="statusCodeInput" class="col-sm-2 col-form-label">Status Code (required):</label>
                <div class="col-sm-4">
                    <input type="text" name="statusCode" <?php echo $statusCodeClass; ?> id="statusCodeInput" placeholder="eg: S0001">
                </div>
            </div>
            <!-- Status text group. This has the label and input-->
            <div class="form-group row">
                <label for="statusText" class="col-sm-2 col-form-label">Status (required):</label>
                <div class="col-sm-8">
                    <input type="text" name="statusText" <?php echo $statusTextClass; ?> id="statusText" placeholder="eg: programming my first assignement">
                </div>
            </div>

            <!-- Button Fields -->
            <div class="form-group">
                <input type="submit" class="btn btn-primary" name="post" value="submit">
            </div>
        </form>
    </div>

Answer 1

Change your PHP code by following, it will work:

$statusCodeClass = 'class="form-control"';
$statusTextClass = 'class="form-control"';
// Are all fields fill
if (isset($_POST['post'])) {
        $isCodePresent = checkStatusCodeIsEmpty();
        $isTextPresent = checkStatusTextIsEmpty();

        //Check if the fields are empty
        if ($isCodePresent && $isTextPresent) {
            echo 'move to the next page';
        } else {
            echo 'not correct yet';
        }

        $statusCodeClass = 'class="form-control '.($isCodePresent ? 'is-valid' : 'is-invalid').'"';
        $statusTextClass = 'class="form-control '.($isTextPresent ? 'is-valid' : 'is-invalid').'"';
    }

    function checkStatusCodeIsEmpty()
    {
        return !empty($_POST['statusCode']);
    }
    function checkStatusTextIsEmpty()
    {
        return !empty($_POST['statusText']);
    }
}

You were trying to assign the variable in a function which was not defined in that scope. I have changed the code to assign the variable based on the function output.

Answer 2

You can use inline php if-else statements to do so:

//Define an error variable on the top of your page
<?php $error = 0; ?>

//Codes here

<div class="form-group row">
    <label for="statusText" class="col-sm-2 col-form-label">Status (required):</label>
    <div class="col-sm-8">
    <?php
        if(empty($_POST['statusText'])){
            echo '<input type="text" name="statusText" class="form-control is-invalid" id="statusText" placeholder="eg: programming my first assignement">';
            $error = 1;
        } else {
            echo '<input type="text" name="statusText" class="form-control is-valid" id="statusText" value="'.$_POST['statusText'].'">';
        }
    ?>
    </div>
</div>

//At the end of the page
<?php
    if($error != 0){
        echo 'Not correct yet';
    } else {
        echo 'Move to the next page';
    }
?>

Answer 3

Maybe you could try the functions like this:

 function checkStatusCodeIsEmpty($statusCode){
      $statusCodeClass= 'class="form-control"';
        if(!statusCode){
            $statusCodeClass='class="form-control is-invalid"';
        }else{
            $statusCodeClass='class="form-control is-valid"';
        }
       return $statusCodeClass;
    }

Then you can call it like this

 $statusCodeClass=checkStatusCodeIsEmpty($_POST['statusCode']);

The same with the other fucntion