How can i add a simple validation which checks if every input is not empty?
I'm just aiming a simple validation which shows an error in the php file if at least 1 form is empty. and proceed to add the input into the database when everything is completely filled up. I already set the variable for every input in the form field of the html form.
HTML code:
<html>
<head>
<title>FEATHER FRIENDS PIZZA SHOP</title>
</head>
<img src="pics/logo.png">
<style>
img {
display: block;
margin: auto;
width:100%;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=reset] {
width: 100%;
background-color: #bfac2c;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=reset]:hover {
background-color: #c43848;
}
input[type=submit]:hover {
background-color: #c43848;
}
div {
background-image: url('pics/bg.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 100px;
}
body {
display: block;
margin: auto;
width: 100%;
height: 100%;
background-color: #f6f6d4;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
<div>
<body>
<img src="pics/pizza.png">
<form action="http://localhost/insert.php" method="post">
<img src="pics/name.png">
<input type="text" id="fname" name="name" placeholder="Your full name...">
<img src="pics/size.png">
<select id="size" name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extra large">Extra Large</option>
</select>
<img src="pics/crust.png">
<select id="crust" name="crust">
<option value="pan">Pan</option>
<option value="thin">Thin</option>
<option value="stuffed">Stuffed</option>
<option value="handtossed">Hand-Tossed</option>
<option value="deepdish">Deep Dish</option>
</select>
<img src="pics/garnish.png">
<input type="text" id="garnish" name="garnish" placeholder="Write your choices here! Ex: Pepperoni, Cheese, Bacon, Mushroom">
<img src="pics/address.png">
<input type="text" id="address" name="address" placeholder="Where should we deliver?">
<img src="pics/contact.png">
<input type="text" id="contact" name="contact" placeholder="What is your contact number?">
<input type="submit" value="Submit">
<input type="reset" value="Reset your Order?">
</form>
</div>
</body>
</html>
PHP code:
<?php
$link = mysqli_connect("localhost", "root", "", "pizza");
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
$name = mysqli_real_escape_string($link, $_POST['name']);
$size = mysqli_real_escape_string($link, $_POST['size']);
$crust = mysqli_real_escape_string($link, $_POST['crust']);
$garnish = mysqli_real_escape_string($link, $_POST['garnish']);
$address = mysqli_real_escape_string($link, $_POST['address']);
$contact = mysqli_real_escape_string($link, $_POST['contact']);
$sql = "INSERT INTO deliver (name, size, crust, garnish, address, contact)
VALUES ('$name', '$size', '$crust', '$garnish', '$address', '$contact')";
if(mysqli_query($link, $sql)){
echo "Data successfully Saved.";
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
mysqli_close($link);
?>