Disable submit button if input field is empty

Question

**Hello..i know my type of question has been answered in different questions before;but i tried them all..none worked!So please have a look on my issue.

I've a table that contains form input fields where values come from database.I didn't wanted the values to be edited.So used "readonly". But the problem is:By the inspect element of a browser when readonly is removed..then the value can be edited and blank input can be submitted !!! So i want to disable the editing or at least want to disable the submit button if input field is empty.**

The code of the table:

 <?php
        if (isset($_POST['show'])) {

            $class = $_POST["Class"];
            $sql = "SELECT * FROM students WHERE Class='$class'  ORDER BY Roll ";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                // output data of each row
                ?>


                    <form action="" method="POST">
                        <table class="table table-bordered table-hover" style="width: 85%;text-align: center">

                            <tr >
                                <th>Roll</th>
                                <th>Student's Name</th>
                                <th>Attendance</th>


                            </tr>
                            <?php while ($row = $result->fetch_assoc()) { ?>
                                <tr>
                                    <td><input value="<?php echo $row['Roll']; ?>" name="Roll[]" readonly required=""/></td>
                                    <td><input value="<?php echo $row['Name']; ?>" name="Name[]" readonly required=""/></td>
                                    <td><select name="Status[]">
                                            <option value="0">0</option>
                                            <option value="1">1</option>
                                        </select></td>

                                </tr>

                            <?php } ?>

                        </table>
                        <input type="submit" name="save" value="Save" style="width: 50%;margin-left: 20%">

                    </form>

                <?php
            } else {
                $message = "Sorry! No result!";
                    echo "<script type='text/javascript'>alert('$message');</script>";
            }
            $conn->close();
        }
        ?>

The insertion code:

<?PHP
        if (isset($_POST["save"])) {

        foreach ($_POST["Roll"] as $rec => $value) {
                $Roll = $_POST["Roll"][$rec];

                $Name = $_POST["Name"][$rec];
                $Status = $_POST["Status"][$rec];
                $Date = date('Y-m-d');
                $sql = "INSERT INTO `attendance`(`id`, `Date`, `Roll`, `Name`, `Status`) VALUES ('','$Date','$Roll','$Name','$Status')";


            }
            if ($conn->query($sql) === TRUE) {
                    $message = "Saved !";
                    echo "<script type='text/javascript'>alert('$message');</script>";
                } else {
                    echo "Error: " . $sql . "<br>" . $conn->error;
                }
        }
        ?>

To disable submit button you have to use jquery/javascript. by inspecting any one can enable the button. — Pankaj Makwana, Apr 25 '18 at 10:10
Use server side resources like session to prevent such misuse of forms. Don't rely on client data or scripts whatsoever it sends. — , Apr 25 '18 at 10:10
I think you need to research the difference between the server side and client side. Anything on the client side can be changed at any given time. Client side validation is for user experience, server side validation is to protect your app. — Devon Bessemer, Apr 25 '18 at 10:16
Your code is vulnerable to [SQL injection](https://en.wikipedia.org/wiki/SQL_injection) attacks. You should use [mysqli](https://secure.php.net/manual/en/mysqli.prepare.php) or [PDO](https://secure.php.net/manual/en/pdo.prepared-statements.php) prepared statements with bound parameters as described in [this post](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php). — , Apr 25 '18 at 10:17
If the only concern is the empty input field, you can prevent the submit action just by adding `required` to the input field: https://www.w3schools.com/tags/att_input_required.asp — Adriano, Apr 25 '18 at 10:20

score 0 · Answer 1 · answered Apr 25 '18 at 10:16

this is correct way to not input empty field

           $class = $_POST["Class"];
          if(!empty($class)) {
            $sql = "SELECT * FROM students WHERE Class='$class'  ORDER BY DESC or ASC";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                // output data of each row
 }
}
                ?>

score 0 · Answer 2 · answered Apr 25 '18 at 10:27

I edited part of your code to disallow editing. I hope it serves your pourpose. i used disabled attribute on the input tags.

  <tr>
                                <td><input value="<?php echo $row['Roll']; ?>" name="Roll[]" disabled/></td>
                                <td><input value="<?php echo $row['Name']; ?>" name="Name[]" disabled/></td>
                                <td><select name="Status[]">
                                        <option value="0">0</option>
                                        <option value="1">1</option>
                                    </select></td>

                            </tr>

Disable submit button if input field is empty

2 Answers2