I'm wondering if anyone can help me with improving my html coding.
First and foremost, I would like to thank you in advance for helping me solve this problem.
Question: I am currently working on my Final Year Product, and I am facing a huge problem. My task is to create a form for students to fill out, in order to apply for an appointment at the college clinic. I have tried multiple ways, to add the data inserted into the textfields, and transfer it into my database. Whenever I click the submit button, I will be brought to a blank website, and the informations I have inserted isn't being added into the database, despite already stating to bring me back to the home page.
What mistake did I make inside the coding? No error appears when I run it, and so it seems as if it is running smoothly. I'm not sure what needs to be corrected, is it the coding on the form, is it the coding for INSERT or is it my database that is acting up?
Pictures are as below:
this is the application form for students to fill
this is the database for appointments
This is the database connection
as for a written coding
The phpMyAdmin coding for table
CREATE TABLE`appointment` (
appID varchar(12),
appDate date,
appTime timestamp,
appSickType varchar(15),
appNote longtext,
matricsNo varchar(12),
appStatus varchar(20),
appDecline varchar(50)
)
The page of the form
<?php
require('database.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Student Appointment</title>
<link rel="stylesheet" href="../css/dashboard.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<style type="text/css">
.form-style-5{
max-width: 500px;
padding: 10px 20px;
background: #f4f7f8;
margin: 10px auto;
padding: 20px;
background: #f4f7f8;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset{
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 10px;
}
.form-style-5 label {
display: block;
margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255,255,255,.1);
border: none;
border-radius: 4px;
font-size: 15px;
margin: 0;
outline: 0;
padding: 10px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color:#8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus{
background: #d2d9dd;
}
.form-style-5 select{
-webkit-appearance: menulist-button;
height:35px;
}
.form-style-5 .number {
background: #353185;
color: #fff;
height: 30px;
width: 30px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 15px 15px 15px 0px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]
{
position: relative;
display: block;
padding: 19px 39px 18px 39px;
color: #FFF;
margin: 0 auto;
background: #353185;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid #16a085;
border-width: 1px 1px 3px;
margin-bottom: 10px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover
{
background: #2a2769;
}
</style>
<div class="wrapper">
<div class="header">
<img src="../images/POLIMAS Treatment Center.png" width="50%" height="100%" alt=""/></div>
<div class="sidebar">
<nav>
<ul>
<li><a href="home-student.php" class="logo">
<img src="../images/grid-img4.png" alt="logo">
<span class="nav-item">Student</span>
</a></li>
<li><a href="home-student.php">
<i class="fa fa-home"></i>
<span class="nav-iteam">Home</span>
</a></li>
<li><a href="student-history.php">
<i class="fa fa-history"></i>
<span class="nav-iteam">Appoiment History</span>
</a></li>
<li><a href="student-appoiment.php">
<i class="fa fa-calendar"></i>
<span class="nav-iteam">Booking Appoiment</span>
</a></li>
<li><a href="student-profile.php">
<i class="fa fa-edit"></i>
<span class="nav-iteam">Update Profile</span>
</a></li>
<li><a href="../index.html" class="logout">
<i class="fa fa-sign-out"></i>
<span class="nav-iteam">logout</span>
</a></li>
</ul>
</nav>
</div>
<div class="content">
<div class="form-style-5">
<form action = "insert_stud_data.php" method="POST">
<fieldset>
<legend><span class="number">1</span>Appointment Info</legend>
<input type="date" id="appDate" name="appDate">
<input type="time" id="appTime" name="appTime">
<label for="appSickType">Sick Type:</label>
<select id="appSickType" name="appSickType">
<optgroup label="Non-Covid">
<option value="fever">Fever</option>
<option value="allergy">Allergy</option>
<option value="stomachache">Stomache Ache</option>
<option value="diarrhea">Diarrhea</option>
<option value="headache">Headaches</option>
<option value="headache">Asthma</option>
</optgroup>
<optgroup label="Covid-Related">
<option value="mildcovid19">Mild Covid-19 Symptoms</option>
<option value="severecovid19">Severe Covid-19 Symptoms</option>
</optgroup>
</select>
</fieldset>
<fieldset>
<legend><span class="number">2</span> Additional Notes</legend>
<input type="text" name="appNote" placeholder="appNote">
<input type="text" name="matricsNo" placeholder="Your Matrics Number">
<label for="appStatus">Covid-19 Status:</label>
<select id="appStatus" name="appStatus">
<option value="fever">Close Contact</option>
<option value="fever">Infected</option>
</fieldset>
<input type="submit" value="Submit" />
</form>
</div>
</div>
<div class="footer">Content for class "footer" Goes Here</div>
</div>
</body>
</html>
As for the code for inserting data into the database
<?php
include 'database.php';
if(!$link){
die("Failed to connect DB_eptc".mysqli_connect_error());
}
$sql = "INSERT INTO appointment(appDate, appTime, appSickType, appNote, matricsNo, appStatus)
VALUES('$_POST[appDate]', '$_POST[appTime]', '$_POST[appSickType]', '$_POST[appNote]',
'$_POST[matricsNo]', '$_POST[appStatus]')";
if (mysqli_query($link,$sql)){
echo "Your new stock has been successfully added!.";
header('Location: home-student.php');
}
else{
"ERROR: Request is unable to be executed $sql".mysqli_error($link);
}
mysqli_close($link);
?>
