1

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;
};
1
  • PHP has nothing to do with browsers. What is the version of jQuery you use? Commented May 12, 2015 at 6:41

4 Answers 4

2

You can check with condition before insert operation

if($nameErr =="" && $emailErr == "")
{
    mysql_query("INSERT INTO timetable(staff,email)
    VALUES('$staff','$email')");
}
Sign up to request clarification or add additional context in comments.

2 Comments

Actually this works. The only problems is the form will submit automatically when the page is refreshed....
You can try with redirect the page to the same page after the insert operation i.e. with header("location: timetablesubmit.php");
0

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')");
}

1 Comment

Actually this works. The only problems is the form will submit automatically when the page is refreshed....
0

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.

Comments

0

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 == ""

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.