Onsubmit Event do form validation in PHP-CodePudding

I have a HTML/PHP form that needs validation of each of the entered fields before updating MySQL database. It would be nice if this cold be done as each field is entered...however, I could use the form's action attribute to run a different validation script but then if there are errors I would need to return to the form and re-populate it with previously entered data for correction - not sure how I would do all this but I guess it's possible. However, I've seen a post here that shows how this can be done with a javascript function for the validation but is this possible to do in PHP? I'm just learning PHP so I'd hate to now have to also learn javascript :( Some guidance appreciated.

    <?php
  if(isset($_POST)) {
      echo __LINE__ . " Form has been posted <br>";
      echo __LINE__ . $_POST['state_city'];
     }
?>

<form action="" method="post">
<table border="0" align="center">
    <tr height="29px" width = "220px">
        <td>
            <label for="student_id"><b>Student-ID</b></label>
        </td>
        <td>
            <input type="text" placeholder="Student ID" name="studentid" value="<?php echo $row['studentid'];?>" required>
        </td>
  </tr>

    <tr height="29px" width = "220px">
        <td>
            <label for="student_name"><b>Student name</b></label>
        </td>
        <td>
            <input type="text" placeholder="Student name" name="name" value="<?php echo $row['$studentname'];?>" required>
        </td>
   </tr>

<tr height="29px" width = "220px"><td><label for="start_date"><b>Start Date</b></label></td>
 <td><input type="date" placeholder="Enter start date" name="start_date" value="<?php echo $row['startdate'];;?>" required></td>
</tr>


    <tr height="29px"><td width = "220px">
        <b>Student Grade</b></td>
        <td>
            <select name="sgrade" id="sgrade">
                <option value="1" <?php if ($row['$sgrade'] == '1') echo "selected"; ?>>Grade 1<option>
                <option value="2" <?php if ($row['$sgrade'] == '2') echo "selected"; ?>>Grade 2<option>
                <option value="3" <?php if ($row['$sgrade'] == '3') echo "selected"; ?>>Grade 3<option>
                <option value="4" <?php if ($row['$sgrade'] == '4') echo "selected"; ?>>Grade 4<option>
            </select>
        </td>
    <tr>

    // value?
    <tr height="29px"><td width = "220px"><b>Country of Birth</b></td>
        <td>
            <select name="country" id="country">
            <?php
                $sql = "SELECT * FROM countries";
                $result = mysqli_query($con, $sql);
            ?>
          
            <?php
                while ($row = mysqli_fetch_array($result)) {
                    echo "<option value='" . $row['id'] . "'>" . $row['name'] . "</option>";

                }
            ?>
            </select>
            <?php
            mysqli_free_result($result);
            mysqli_close($con);
            ?>
        </td>
    </tr>

<tr height="29px" width = "220px">
    <td><label for="state_city"><b>State and/or main city</b></label></td>
    <td><input type="text" placeholder="Student State and/or Main City" name="state_city" value="<?php echo $row['$state_city'];?>" required></td>
</tr>

<tr height="29px" width = "220px">
        <td><label for="healthcheck"><b>Checked?</b></label></td>
            <td>
                <input type="radio" id="checkyes" name="check" value="1" <?php if ($row['check']) echo "checked";?>>
                <label for="checkyes"> Yes</label><br>
                <input type="radio" id="checkno" name="check" value="0" <?php if (!$row['check']) echo "checked";?>>
                <label for="checkno"> No</label><br><br>
            </td>
        </tr>

</table>
    <button type="submit">Save</button>
    <div  style="background-color:#f1f1f1">
      <button type="button" onclick="history.back()" value="Go back!" >Cancel</button>
    </div>
</form>

<script>
function check() {
  document.getElementById("checkyes").checked = true;
}
function uncheck() {
  document.getElementById(hcheckyes").checked = false;
}
</script>

</body>
</html>

CodePudding user response：

If you want it to be dynamic as the user enters the information you will have to use JavaScript as that would be a front end solution. With PHP you can do you validation/sanitizing of the data on the server side as the form is submitted. It is suggested you do both.

For your question of repopulating this is one way
<input type="text" name="name" value="<?php echo htmlspecialchars($_POST['name'] ?? '', ENT_QUOTES); ?>">

For more info : https://radu.link/keep-form-data-submit-refresh-php/

CodePudding user response：

I hope this will give you some idea...

<?php 
$flag = '';
    if(isset($_POST['submit'])){
        if($_POST['studentid'] !='' && $_POST['name'] !='' && $_POST['start_date'] !='' && $_POST['state_city'] !='' && $_POST['check'] !=''){
            // echo "successfully submitted" . "<br>";
        // echo "Sudent Id " . $_POST['studentid'] . "<br>";
        $studentid = $_POST['studentid'];
        // echo "Student Name " . $_POST['name'] . "<br>";
        $studentname = $_POST['name'];
        // echo "Start Date " . $_POST['start_date'] . "<br>";
        $startdate = $_POST['start_date'];
        // echo "State " . $_POST['state_city'] . "<br>";
        $state = $_POST['state_city'];
        // echo "Checked " . $_POST['check'] . "<br>";
        $check = $_POST['check'];

        if(($_POST['check'] != 0) &&  ($_POST['start_date'] >= date("Y-m-d"))){
            echo "Successfully Submitted";
        }else{
            echo "errors";
            $flag = 1;
        }
    }else{
        echo "All Feilds are Mandatory.";
        
    }
    }
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <form action="file_name.php" method="POST">
        <table border="0" align="center">
    <tr height="29px" width = "220px">
        <td>
            <label for="student_id"><b>Student-ID</b></label>
        </td>
        <td>
            <input type="text" placeholder="Student ID" name="studentid" value="<?= ($flag == 1) ? $studentid : '' ?>" required>
        </td>
  </tr>
  <tr height="29px" width = "220px">
        <td>
            <label for="student_name"><b>Student name</b></label>
        </td>
        <td>
            <input type="text" placeholder="Student name" name="name" value="<?= ($flag == 1) ? $studentname : '' ?>" required>
        </td>
   </tr>
   <tr height="29px" width = "220px"><td>
    <label for="start_date"><b>Start Date</b></label></td>
 <td><input type="date" placeholder="Enter start date" name="start_date" value="<?= ($flag == 1) ? $startdate : '' ?>" required></td>
</tr>
 <tr height="29px" width = "220px">
    <td><label for="state_city"><b>State and/or main city</b></label></td>
    <td><input type="text" placeholder="Student State and/or Main City" name="state_city" value="<?= ($flag == 1) ? $state : '' ?>" required></td>
</tr>
<tr height="29px" width = "220px">
        <td><label for="healthcheck"><b>Checked?</b></label></td>
            <td>
                <input type="radio" id="checkyes" name="check" value="1" <?= ($flag == 1) ? "checked" : '' ?>>
                <label for="checkyes"> Yes</label><br>
                <input type="radio" id="checkno" name="check" value="0" <?= ($flag == 1) ? "checked" : '' ?>>
                <label for="checkno"> No</label><br><br>
            </td>
        </tr>
        </table>
    <button type="submit" name="submit">Save</button>
    <div  style="background-color:#f1f1f1">
      <button type="button" value="Go back!" >Cancel</button>
    </div>
</form>
    </form>
</body>
</html>

but I will also suggest to use javascript for your project to be way more professional and dynamic