Reputation: 19
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
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
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
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
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