I am trying to get value from dropdown named "time". I mentioned both id and name. I tried all the way to get selected text from dropdown but no luck.
This is my Appointment.php
<!--author: W3layouts
author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "eventplanner";
session_start();
$u_id = $_SESSION['login'];
$v_id = $_SESSION['vendorID'];
$s_id = $_SESSION['serviceID'];
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
//header("Location : index.php");
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;
if ($_SERVER['REQUEST_METHOD'] === 'POST')
{
if(isset($_POST['submit']))
{
$email = $_POST['email'];
$date = $_POST['date'];
$time = $_POST['time'];
$name = $_POST['firstName'];
//echo "$u_id";
$sql="SELECT * FROM vendor_reg WHERE v_id='$v_id'";
//$sql2="SELECT * FROM tblreg a, tblreg b WHERE a.networkingID=b.ID AND a.ID = 2";
$result=$conn->query($sql);
$count=mysqli_num_rows($result);
echo $u_id;
echo $v_id;
echo $s_id;
if ($count > 0) {
echo "<br>";
//echo $count;
echo $date;
echo $time;
$row = mysqli_fetch_row($result);
$vname=$row[2];
//$_SESSION['pass']=$row[2];
//header("location:services.php");
}
$db = mysqli_connect("localhost","root","") or die("Unable to connect to database");
mysqli_select_db($db, "eventplanner") or die("Unable to connect to database");
$query = 'INSERT INTO appointment (v_id, u_id, s_id, ap_date, apt_time) VALUES ("'.$v_id.'","'.$u_id.'","'.$s_id.'","'.$date.'","'.$time.'")';
if(mysqli_query($db,$query))
{
require_once('./PHPMailer/src/SMTP.php');
require_once('./PHPMailer/src/PHPMailer.php');
require_once('./PHPMailer/src/Exception.php');
// passing true in constructor enables exceptions in PHPMailer
$mail = new PHPMailer(true);
try {
// Server settings
$mail->SMTPDebug = 0; // for detailed debug output
$mail->isSMTP();
$mail->Host = 'smtp.gmail.com';
$mail->SMTPAuth = true;
$mail->SMTPSecure = 'tls';
$mail->Port = 587;
$mail->Username = '[email protected]'; // YOUR gmail email
$mail->Password = ''; // YOUR gmail password
$mail->Sender = $email;
// Sender and recipient settings
$mail->setFrom('[email protected]', 'Eventra' ,FALSE);
//$mail->addAddress($email, 'Shah');
$mail->addAddress($email,'Forgot Password');
$mail->addReplyTo('[email protected]', 'Otp Verfication'); // to set the reply to
//$code = rand(1,999999);
// Setting the email content
$mail->IsHTML(true);
$mail->Subject = "Appointment confirmation";
$mail->Body = "Hello $name, we have booked your appointment with $vname on $date at $time EST";
$mail->AltBody = 'An appointment sonfirmation for you!';
//session_start();
$mail->send();
echo "Email message sent.";
header("location:VendorInfo.php");
//echo '<a href="list.php?otp='.$code.'">';
}
catch (Exception $e) {
echo "Error in sending email. Mailer Error: {$mail->ErrorInfo}";
}
}
else
{
echo "not";
}
//echo "<h3>"."This is email".$email."</h3>";
}
}
?>
<head>
<title>modern Appointment Form Flat Responsive widget Template :: w3layouts</title>
<!-- metatags-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="modern appointment form a Flat Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Meta tag Keywords -->
<!-- css files -->
<link rel="stylesheet" href="css/jquery-ui.css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/><!--stylesheet-css-->
<link href="//fonts.googleapis.com/css?family=Poppins" rel="stylesheet"><!--online-fonts-->
<link href="//fonts.googleapis.com/css?family=Raleway" rel="stylesheet"><!--online-fonts-->
<!-- //css files -->
</head>
<body>
<h1> App<span class="title">o</span>intment f<span class="title">o</span>rm</h1>
<div class="w3l-main">
<div class="w3l-from">
<form action="#" method="post">
<div class="w3l-user">
<label class="head">name<span class="w3l-star"> * </span></label>
<input type="text" id="firstName" name="firstName" placeholder="your name" required="">
</div>
<div class="w3l-mail">
<label class="head">mail<span class="w3l-star"> * </span></label>
<input type="email" name="email" id="email" placeholder="enter your e-mail" required="">
</div>
<div class="clear"></div>
<div class="w3l-details1">
<div class="w3l-num">
<label class="head">phone number<span class="w3l-star"> * </span></label>
<input type="text" name="phoneNumber" placeholder="Phone Number" required="">
</div>
<div class="w3l-date">
<label class="head">date of appointment<span class="w3l-star"> * </span></label>
<div class="styled-input">
<input class="date" id="datepicker" name="date" type="text" value="MM/DD/YYYY" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'MM/DD/YYYY';}" required="">
</div>
</div>
<div class="clear"></div>
<div class="w3l-details3">
<div class="w3l-options1">
<select class="category1" id="time" name="time" required="">
<option value="">Select Time</option>
<option value="">09:00 to 10:00 AM</option>
<option value="">10:00 to 11:00 AM</option>
<option value="">11:00 to 12:00 PM</option>
<option value="">12:00 to 01:00 PM</option>
<option value="">01:00 to 02:00 PM</option>
</select>
</div>
</div>
<div class="w3l-options2">
<select class="category2" required="">
<option value="">Gender</option>
<option value="">Male</option>
<option value="">Female</option>
</select>
</div>
<div class="w3l-rem">
<div class="w3l-right">
</div>
<div class="btn">
<input type="submit" name="submit" value="Book Appointment"/>
</div>
</div>
<div class="clear"></div>
</form>
</div>
</div>
<!-- Default-JavaScript --> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- Calendar -->
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker,#datepicker1" ).datepicker();
});
</script>
<!-- //Calendar -->
This is my css file
/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
/*--Reset code--*/
body{
background:url(../images/bg2.jpg)no-repeat;
background-size: cover;
background-position: center;
}
body a{
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
font-weight:400;
}
input[type="button"],input[type="submit"],input[type="text"],input[type="email"]{
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
font-family: 'Poppins', sans-serif;
}
h1,h2,h3,h4,h5,h6{
margin:0;
font-weight:400;
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
font-family: 'Raleway', sans-serif;
}
.clear {
clear:both;
}
p{
margin:0;
}
ul{
margin:0;
padding:0;
}
label{
margin:0;
font-family: 'Poppins', sans-serif;
}
textarea{
font-family: 'Poppins', sans-serif;
}
img {
width: 100%;
}
footer{
font-family: 'Raleway', sans-serif;
}
footer a {
font-family: 'Raleway', sans-serif;
}
@font-face {
font-family: 'Poppins';
src: url('../fonts/Poppins Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Raleway';
src: url('../fonts/Raleway.ttf') format('truetype');
}
/*--/Reset code--*/
h1 {
font-size: 45px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
letter-spacing: 12px;
margin: 40px 0 40px 0;
color: #fff;
font-family: 'Poppins', sans-serif;
}
.w3l-main{
width:45%;
margin: 0 auto;
}
.w3l-from {
flex-basis: 300px;
padding: 3em;
justify-content: center;
background: rgba(14, 14, 14, 0.61);
box-shadow: 5px -5px #efece8;
}
label.head {
font-size: 15px;
font-weight: 500;
text-align: left;
text-transform: capitalize;
letter-spacing: 2px;
padding: 2px;
margin: 2px;
display: block;
color: #3ce0b4;
font-family: 'Poppins', sans-serif;
}
span.title{
color: #ca5c93;
}
span.w3l-star {
font-size: 20px;
vertical-align: middle;
color: #c74184;
line-height: 1;
}
.w3l-user input[type="text"] {
font-size: 15px;
font-weight: 500;
text-align: left;
text-transform: capitalize;
letter-spacing: 1px;
box-sizing: border-box;
border: none;
border-bottom: 2px solid #fff;
padding: 10px;
width: 100%;
outline: none;
margin: 0px auto 10px;
color: #000000;
}
.w3l-mail input[type="email"] {
font-size: 15px;
font-weight: 500;
text-align: left;
text-transform: capitalize;
letter-spacing: 1px;
box-sizing: border-box;
border: none;
padding: 10px;
width: 100%;
outline: none;
margin: 0px auto 10px;
color:#000000;
}
.w3l-num input[type="text"] {
font-size: 15px;
font-weight: 500;
text-align: left;
text-transform: capitalize;
letter-spacing: 1px;
border: none;
box-sizing: border-box;
outline: none;
padding: 10px;
width: 100%;
margin: 0 auto 30px;
color: #000000;
}
.w3l-date input.date {
font-size: 15px;
font-weight: 500;
text-align: left;
text-transform: capitalize;
letter-spacing: 1px;
border: none;
box-sizing: border-box;
outline: none;
padding: 10px;
width: 100%;
margin: 0px auto 11px;
color: #000000;
}
select.form-control {
font-size: 15px;
font-weight: 500;
text-align: center;
text-transform: capitalize;
padding: 10px;
width: 100%;
box-sizing: border-box;
border: none;
outline: none;
font-family: 'Poppins', sans-serif;
}
.w3l-options1 .category1 {
font-size: 15px;
font-weight: 500;
text-align: center;
text-transform: capitalize;
padding: 10px;
width: 100%;
margin: 0 auto 10px;
box-sizing: border-box;
border: none;
outline: none;
font-family: 'Poppins', sans-serif;
}
.w3l-options2 .category2 {
font-size: 15px;
font-weight: 500;
text-align: center;
text-transform: capitalize;
padding: 10px;
width: 100%;
margin: 0 auto 10px;
box-sizing: border-box;
border: none;
outline: none;
font-family: 'Poppins', sans-serif;
}
ul li {
list-style-type: none;
display: inline-block;
line-height: 1.5;
}
.w3l-num {
float: left;
width: 48%;
}
.w3l-date {
float: left;
width: 48%;
margin-left: 4%;
}
.w3l-options1 {
float: left;
width: 48%;
}
.w3l-options2 {
float: right;
width: 48%;
}
.gender {
float: left;
width: 48%;
}
.w3l-sym {
float: right;
width: 48%;
margin-left: 4%;
}
.w3l-sym input[type="text"] {
font-size: 15px;
font-weight: 500;
text-align: left;
text-transform: capitalize;
letter-spacing: 1px;
border: none;
box-sizing: border-box;
outline: none;
padding: 10px;
width: 100%;
margin: 0px auto 10px;
color: #000000;
font-family: 'Poppins', sans-serif;
}
.w3l-right textarea {
font-size: 15px;
font-weight: 500;
text-align: left;
text-transform: capitalize;
width: 100%;
padding: 10px;
resize: none;
min-height: 100px;
border: 1px solid #fff;
outline: none;
background: #fff;
box-sizing: border-box;
color: #000;
font-family: 'Poppins', sans-serif;
}
label.w3l-set {
font-size: 15px;
font-weight: 500;
text-align: center;
text-transform: capitalize;
padding: 2px;
color: #3ce0b4;
cursor: pointer;
}
label.w3l-head2 {
float: left;
margin-right: 20px;
letter-spacing: 1px;
}
.w3l-left1 {
margin-top: 25px;
}
label.w3l-set2 {
font-size: 15px;
text-align: left;
text-transform: capitalize;
letter-spacing: 2px;
color: #3ce0b4;
display: block;
margin-bottom: 10px;
}
label.w3l-head2 {
font-size: 15px;
text-transform: capitalize;
text-align: center;
margin-bottom: 20px;
color: #3ce0b4;
font-family: 'Poppins', sans-serif;
}
.btn input[type="submit"] {
font-size: 15px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
padding: 10px;
width: 50%;
margin: 20px auto 0px;
box-sizing: border-box;
border: 1px solid #fff;
outline: none;
cursor: pointer;
display: block;
color: #fff;
background: #c74184;
font-family: 'Poppins', sans-serif;
}
.btn input[type="submit"]:hover{
background-color: #3ce0b4;
}
footer {
font-size: 15px;
font-weight: 500;
text-align: center;
text-transform: capitalize;
letter-spacing: 1px;
margin: 20px 0 0 0;
color: #fff;
}
footer a {
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
color: #fff;
}
footer a:hover {
color: #3bf1c0;
}
/*-- input-effect --*/
.styled-input.agile-styled-input-top {
margin-top: 0;
}
.styled-input input:focus ~ label, .styled-input input:valid ~ label,.styled-input textarea:focus ~ label ,.styled-input textarea:valid ~ label{
font-size: .9em;
color: #fff;
top: -1.5em;
-webkit-transition: all 0.125s;
-moz-transition: all 0.125s;
-o-transition: all 0.125s;
-ms-transition: all 0.125s;
transition: all 0.125s;
}
.styled-input {
width: 100%;
position: relative;
margin: 0 0 1.6em;
color: #fff;
}
.styled-input:nth-child(1),.styled-input:nth-child(3){
margin-left:0;
}
.textarea-grid{
float:none !important;
width:100% !important;
margin-left:0 !important;
}
.styled-input label {
color: #8c8c8c;
color: #bfbfbf;
padding: 0.5em .9em;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
font-weight: 400;
font-size: .9em;
display: block;
line-height: 1em;
color:#fff;
font-family: 'Poppins', sans-serif;
}
.styled-input input ~ span,.styled-input textarea ~ span {
display: block;
width: 0;
height: 2px;
background: #fff;
position: absolute;
bottom: 0;
left: 0;
-webkit-transition: all 0.125s;
-moz-transition: all 0.125s;
transition: all 0.125s;
}
.styled-input textarea ~ span {
bottom: 5px;
}
.styled-input input:focus.styled-input textarea:focus {
outline: 0;
}
.styled-input input:focus ~ span,.styled-input textarea:focus ~ span {
width: 100%;
-webkit-transition: all 0.075s;
-moz-transition: all 0.075s;
transition: all 0.075s;
}
.ui-datepicker .ui-datepicker-prev {
left: 10px;
width: 20px;
height: 20px;
background: url(../images/img-sp1.png) no-repeat 0px 0px;
cursor: pointer;
}
.ui-datepicker .ui-datepicker-next {
right: 10px;
width: 20px;
height: 20px;
background: url(../images/img-sp.png) no-repeat 0px 0px;
cursor: pointer;
}
.ui-datepicker table {
background-color: #c74184 !important;
}
/*-- //input-effect --*/
/*--responsive--*/
@media(max-width:1920px){
}
@media(max-width:1680px){
}
@media(max-width:1600px){
}
@media(max-width:1440px){
}
@media(max-width:1366px){
.w3l-main {
width: 55%;
}
}
@media(max-width:1280px){
.w3l-main {
width: 55%;
}
label.head {
letter-spacing: 1px;
}
}
@media(max-width:1080px){
.w3l-main {
width: 60%;
}
@media(max-width:1050px){
.w3l-main {
width: 60%;
}
}
@media(max-width:1024px){
h1{
letter-spacing: 10px;
}
}
@media(max-width:991px){
h1 {
letter-spacing: 10px;
}
.w3l-from{
padding: 2em;
}
}
@media(max-width:900px){
h1{
font-size: 40px;
}
}
@media(max-width:800px){
h1{
letter-spacing: 5px;
}
.w3l-main {
width: 70%;
}
}
@media(max-width:768px){
.w3l-from{
padding: 2em;
}
}
@media(max-width:736px){
}
@media(max-width:667px){
.w3l-main {
width: 80%;
}
.w3l-from {
padding: 2em
}
h1{
letter-spacing: 2px;
}
.btn input[type="submit"]{
width: 60%;
}
}
@media(max-width:640px){
.w3l-main {
width: 90%;
}
h1{
letter-spacing: 1px;
}
footer {
letter-spacing: 0px;
}
}
@media(max-width:600px){
h1{
font-size: 35px;
}
.w3l-from {
padding: 2em;
}
footer{
font-size: 14px;
}
footer a {
font-size: 14px;
}
}
@media(max-width:568px){
.w3l-from{
padding: 2em;
}
label.head {
letter-spacing: 0px;
}
}
@media(max-width:480px){
h1 {
font-size: 30px;
}
.w3l-from{
padding: 1em;
}
.w3l-num {
width: 100%;
}
.w3l-date {
width: 100%;
margin: 0;
}
.w3l-options1 .category1{
margin: 0 auto 30px;
}
.w3l-options1 {
width: 100%;
}
.w3l-options2 {
float: right;
width: 100%;
}
.gender {
float: left;
width: 100%;
}
.w3l-sym {
width: 100%;
}
.btn input[type="submit"]{
width: 70%;
}
}
@media(max-width:414px){
.w3l-from{
padding: 1em;
}
.w3l-main {
width: 95%;
}
h1 {
font-size: 25px;
}
.btn input[type="submit"] {
width: 100%;
}
}
@media(max-width:384px){
.w3l-from{
padding: 1em;
}
h1{
font-size: 25px;
}
.w3l-options1 {
float: left;
width: 100%;
}
.w3l-options2 {
float: right;
width: 100%;
}
.gender {
float: left;
width: 100%;
}
.w3l-sym {
float: right;
width: 100%;
margin-left: 0%;
}
}
@media(max-width:375px){
.w3l-from{
padding: 1em;
}
}
@media(max-width:320px){
.w3l-from{
padding: 1em;
}
}
/*--/responsive--*/
I am trying to do it from the last 2 days but no luck. Previously it was showing that undefined index.
If I understood your problem correctly, you can't retrieve the value selected in the select "time"?
If this is the case it is because you forgot to indicate values to the options.
See the code below {VALUE_HERE}
<select class="category1" id="time" name="time" required="">
<option value="" disabled selected>Select Time</option>
<option value="{VALUE_HERE}">09:00 to 10:00 AM</option>
<option value="{VALUE_HERE}">10:00 to 11:00 AM</option>
<option value="{VALUE_HERE}">11:00 to 12:00 PM</option>
<option value="{VALUE_HERE}">12:00 to 01:00 PM</option>
<option value="{VALUE_HERE}">01:00 to 02:00 PM</option>
</select>