当我从 php 的下拉列表中 select 时，我得到空值。有时，它会显示 "undefined index" 之类的错误
I am getting null values when I select from dropdown in php. And sometime, it shows up error like "undefined index"
我正在尝试从名为“time”的下拉列表中获取值。我同时提到了 id 和 name。我一直尝试从下拉列表中获取选定的文本，但没有成功。
这是我的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 = 'honeyshah180599@gmail.com'; // YOUR gmail email
$mail->Password = ''; // YOUR gmail password
$mail->Sender = $email;
// Sender and recipient settings
$mail->setFrom('honeyshah180599@gmail.com', 'Eventra' ,FALSE);
//$mail->addAddress($email, 'Shah');
$mail->addAddress($email,'Forgot Password');
$mail->addReplyTo('honeyshah180599@gmail.com', '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 -->
这是我的css文件
/*
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--*/
我最近 2 天一直在尝试这样做，但没有成功。以前它显示未定义的索引。
如果我对你的问题的理解正确，你无法检索 select 在 select“时间”中输入的值？
如果是这种情况，那是因为您忘记为选项指定值。
查看下面的代码{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>
我正在尝试从名为“time”的下拉列表中获取值。我同时提到了 id 和 name。我一直尝试从下拉列表中获取选定的文本，但没有成功。
这是我的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 = 'honeyshah180599@gmail.com'; // YOUR gmail email
$mail->Password = ''; // YOUR gmail password
$mail->Sender = $email;
// Sender and recipient settings
$mail->setFrom('honeyshah180599@gmail.com', 'Eventra' ,FALSE);
//$mail->addAddress($email, 'Shah');
$mail->addAddress($email,'Forgot Password');
$mail->addReplyTo('honeyshah180599@gmail.com', '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 -->
这是我的css文件
/*
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--*/
我最近 2 天一直在尝试这样做，但没有成功。以前它显示未定义的索引。
如果我对你的问题的理解正确，你无法检索 select 在 select“时间”中输入的值？
如果是这种情况，那是因为您忘记为选项指定值。
查看下面的代码{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>