rebecca
rebecca

Reputation: 19

How to insert data into database only when input are not empty?

I came up with a problem which made me crazy as I am new to PHP. The problem is: the below timetable submission form works good on Chrome (every time I left the email unfilled, the submission cannot be processed). However, when using on safari, you can always submit blank form into the database.

Here is the html form.

<script type="text/javascript" src="/membership/my-form/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/membership/my-form/js/main.js"></script>

<form class="mf-form floating-labels" method="post" action="timetablesubmit.php">

    <div>
        <h1 style="text-align:center">Availability form</h1>
    </div>
    <div>
        <p class="mf-select icon">
            <select name="timetable-staff" class="user" required>
                <option value="">Select Person</option>
                <option value="AMY">Amy</option>
                <option value="TOM">Tom</option>
            </select>
        </p>

        <div>
            <input name="location1" value="A" type="hidden">
            <input name="location2" value="B" type="hidden">
        </div>
        <div class="AMY box">You work in A.</div>
        <div class="TOM box">You work in B.</div>
    </div>

    <div class="icon">
        <label class="mf-label" for="mf-email">Email Address</label>
        <input class="email" type="email" name="timetable-email" id="mf-email" required>
    </div>

</form>


<script type="text/javascript">
    $(document).ready(function(){
        $("select").change(function(){
            $( "select option:selected").each(function(){
                if($(this).attr("value")=="Amy"){
                    $(".box").hide();
                    $(".AMY").show();
                }
                if($(this).attr("value")=="Tom"){
                    $(".box").hide();
                    $(".TOM").show();
                }
            });
        }).change();
    });
</script>


<style type="text/css">
    .box{
        padding: 10px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
        font-size:1.6em;
        text-align:center;
        background-color: #f1f1f1;
    }
</style>

Here is the timetablesubmit.php:

<?php
header("content-type:text/html;charset=utf-8");

session_start();

$timesubmit=date('Y-m-d H:i:s');
$staff=$_POST['timetable-staff'];
$email=$_POST['timetable-email'];


$con=mysql_connect("localhost","database","password");
if (!$con) {
    die ('Could not connect:' . mysql_error());
}

mysql_select_db("database", $con);

mysql_query("set names utf8");
mysql_query("INSERT INTO timetable(staff,email)
        VALUES('$staff','$email')");

mysql_close($con);

sleep(2);
?>

<html>
<? require 'header.php'; ?>
<div class="tk-reg">
    <p>Thak you <?php echo $_POST['timetable-staff']; ?><p>
    <p> Time availability submitted successfully.<p>
        Your email address is: <?php echo $_POST["timetable-email"]; ?>
</div>

<div class="tk-regfollow">
    <ul style="text-align:center">
        <a href="/membership/index.php">Back to home page.</a>
    </ul>
</div>
</html>

Then I searched the Internet and changed to below, still not working on Safari (the alert appears, however data still been insert into database.

<?php
require 'header.php';
$nameErr = $emailErr = "";
$name = $email = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["timetable-staff"])) {
        $nameErr = "Please select a staff.";
    } else {
        $staff = test_input($_POST["timetable-staff"]);
    }
    if (empty($_POST["timetable-email"])) {
        $emailErr = "Email address is required";
    } else {
        $email = test_input($_POST["timetable-email"]);
    }
}
function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

$con=mysql_connect("localhost","database_name","database_password");
if (!$con) {
    die ('Could not connect:' . mysql_error());
}

mysql_select_db("database_name", $con);

mysql_query("set names utf8");
mysql_query("INSERT INTO timetable(staff,email)
        VALUES('$staff','$email')");

mysql_close($con);
sleep(2);
?>


<html>
<style>
    .error {color: #FF0000;}
</style>

<h1 style="text-align:center">Availability form for
    <?php
    $d=strtotime("+1 Months");
    echo date("M", $d) . "  2015 <br>";
    ?>
</h1>

<form class="mf-form floating-labels" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    <div>
        <p class="mf-select icon">
            <select name="timetable-staff" class="user" required>
                <option value="">Select Person</option>
                <option value="AMY">Amy</option>
            <option value="TOM">Tom</option>
            </select>
            <span class="error">* <?php echo $nameErr;?></span>
        </p>
    </div>
    <div class="icon">
        <label class="mf-label" for="mf-email">Email Address</label>
        <input class="email" type="email" name="timetable-email" id="mf-email" required>
        <span class="error">* <?php echo $emailErr;?></span>
    </div>
    <br><br>
    <input type="submit" name="submit" value="Submit">
</form>
</html>

I hope someone could help me pointing out my mistakes. Thank you.

======================================================================

I tried a lot of ways to figure this out, however still have either 'this' or 'that' problems. I finally use a method that actually work, but I do not know whether it is not recommended.

Here is the code I modified in timetablesubmit.php (my flow is: timetable.php ==>timetablesubmit.php==>welcome.php)

$email = trim($_POST['timetable-email']);
if($email !='' and $email !=null) {
    $sql1;
}
else {
     echo '<html><head>
             <link rel="stylesheet" type="text/css" href="/membership/style.css"/>
           <head>
        <div class="check-error-message">
           <p>Error: Email address is required.</p><br>
           <a href="javascript:history.back(-1);">Return</a>
        </div>';
    exit;
};

Upvotes: 1

Views: 2568

Answers (4)

Zander
Zander

Reputation: 1086

As they said, not all browsers accept the attribute required because it's new.

On PHP, server side, you can validate too if there's something filled with:

$var = trim($_POST['var']);
if(!is_empty($var)) {
    //do mysqli function
}
else {
    //show error
}

trim will remove blank spaces at start and end of the value given.

is_empty will be almost like $var == ""

Upvotes: 0

uiTeam324
uiTeam324

Reputation: 1245

Html 5 "required" will not work in safari.

This line is the problem <input class="email" type="email" name="timetable-email" id="mf-email" required>

Write jquery/javascript validation to check the required field.

Hope its help you.

Upvotes: 0

user3419778
user3419778

Reputation: 866

You can check with condition before insert operation

if($nameErr =="" && $emailErr == "")
{
    mysql_query("INSERT INTO timetable(staff,email)
    VALUES('$staff','$email')");
}

Upvotes: 2

Neelesh
Neelesh

Reputation: 193

you can have one condition here to avoid empty fill

mysql_query("INSERT INTO timetable(staff,email)
        VALUES('$staff','$email')");

here keep this condition like this

    if($staff!='' && $email!='')
{
mysql_query("INSERT INTO timetable(staff,email)
            VALUES('$staff','$email')");
}

Upvotes: 0

Related Questions