I've tried to implement the blur attribute to the image but it just blurs the body. I'm not sure how to make display it right. Thanks!
Here is the website.
http://79.170.44.80/sicuandomain.com/
Here is the html, and style, php code
<?php
$bg = array('Abstract.jpg', 'Antelope.jpg', 'Bahamas.jpg', 'Beach.jpg' ); // array of filenames
$i = rand(0, count($bg)-1);
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
<!DOCTYPE html>
<html>
<head>
<title>My Contact Form</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
body{
content:"";
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
background-size: cover;
z-index: -999;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<form id="form" action="welcome.php" class="form-horizontal" method="POST">
<h1 class="">My Contact Form</h1>
<div class="form-group">
<div class="col-lg-4">
<input type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*"required/>
</div>
<div class="col-lg-4">
<input type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-8">
<input type="email" placeholder="Email Address" name="email" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-8">
<input type="text" placeholder="Mobile" name="mobile" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-8">
<select name="gender" class="form-control" required>
<option value="">Select one</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">I'm not sure</option>
</select>
</div>
</div>
<div class="form-group">
<div class>
</div>
<div class="form group">
<div class="col-lg-offset-2 col-lg-6">
<button type="submit" class="btn btn-success pull-right">
<i class="fa fa-plus"></i> Add
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-1.11.3.min.js.css" type="text/javascript"></script>
</body>
</html>
try this.
demo fiddle http://jsfiddle.net/jLGFp/3/
div {
position: absolute;
left:0;
top: 0;
}
p {
position: absolute;
left:0;
top: 0;
}
Related
i want to make a form with image on its side as image below , and this is my form
Thank you
<div class="col-5">
<label for="nomor_servis">Nama Bengkel</label>
<input type="text" name="nama_bengkel" class="form-control">
</div>
<div class="col-5">
<label for="nomor_servis">Nama Bengkel</label>
<textarea name="alamat" class="form-control" cols="10" rows="4" placeholder="Alamat"></textarea>
</textarea>
</div>
<div class="col-5">
<label for="nomor_servis">Tanggal Berdiri</label>
<input type="text" name="nama_bengkel" class="form-control">
</div>
Using flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-container > div {
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<div class="col-5">
<label for="nomor_servis">Nama Bengkel</label>
<input type="text" name="nama_bengkel" class="form-control">
</div>
<div class="col-5">
<label for="nomor_servis">Nama Bengkel</label>
<textarea name="alamat" class="form-control" cols="10" rows="4" placeholder="Alamat"></textarea>
</textarea>
</div>
<div class="col-5">
<label for="nomor_servis">Tanggal Berdiri</label>
<input type="text" name="nama_bengkel" class="form-control">
</div>
</div>
<div>
<img style="width: 400px; height: 400px" src="https://source.unsplash.com/random" />
</div>
</div>
</body>
</html>
You can use Bootstrap Gird System for doing it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid" style="margin-top: 10px;">
<div class="row content">
<div class="col-sm-6">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-sm-6">
<img style="width: 100%; height: 200px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Imgur_logo.svg/1200px-Imgur_logo.svg.png" />
</div>
</div>
</div>
</body>
</html>
I created new inquiry form for my website. But it's giving the following error message.
Error
Sorry there was an error sending your form.
mail:Could not instantiate mail function.
Form HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHP Contact Form Script With Validation - reusable form</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="form.css" >
<script src="form.js"></script>
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>Contact Us</h2>
<p> Send us your message and we will get back to you as soon as possible </p>
<form role="form" method="post" id="reused_form">
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> First Name:</label>
<input type="text" class="form-control" id="firstname" name="firstname" maxlength="50">
</div>
<div class="col-sm-6 form-group">
<label for="name"> Last Name:</label>
<input type="text" class="form-control" id="lastname" name="lastname" maxlength="50">
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="email"> Email:</label>
<input type="text" class="form-control" id="email" name="email" maxlength="50">
</div>
<div class="col-sm-6 form-group">
<label for="email"> Phone:</label>
<input type="tel" class="form-control" id="phone" name="phone" required maxlength="50">
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<label for="name"> Message:</label>
<textarea class="form-control" type="textarea" id="message" name="message" placeholder="Your Message Here" maxlength="6000" rows="7"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<button type="submit" class="btn btn-lg btn-success btn-block" id="btnContactUs">Post It! </button>
</div>
</div>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; "> <h3>Sent your message successfully!</h3> </div>
<div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Sorry there was an error sending your form. </div>
</div>
</div>
</div>
</body>
</html>
Handler.php:
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
/*
Tested working with PHP5.4 and above (including PHP 7 )
*/
require_once './vendor/autoload.php';
use FormGuide\Handlx\FormHandler;
$pp = new FormHandler();
$validator = $pp->getValidator();
$validator->fields(['firstname','lastname', 'email','phone'])->areRequired()->maxLength(50);
$validator->field('email')->isEmail();
$validator->field('message')->maxLength(6000);
$pp->sendEmailTo('name#mail.com'); // ← Your email here
echo $pp->process($_POST);
You are not defining an action for the form.
<form role="form" method="post" id="reused_form" action="Handler.php">
<!-- html goes here -->
</form>
<?php
include "dbconfig.php";
session_start();
if (isset($_SESSION["session_admin"])=="" || $_SESSION["session_admin"]=="") {
header("location:index.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Edit</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.form-control
{
width: 300px;
/*text-transform: uppercase;*/
}
.email
{
/*ext-transform: lowercase;*/
}
.btn
{
color: white;
}
.error{
color: red;
}
.right-addon input { padding-right: 0px; }
.right-addon .glyphicon { right: 0px;}
</style>
</head>
<script type="text/javascript">
</script>
<body>
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
<center><strong><h2>Edit</h2></strong></center>
</div>
<div class="panel-body">
<?php
$get_id=$_GET["id"];
$result=mysqli_query($db,"select * from signup where sid=$get_id");
while ($row=mysqli_fetch_array($result)) {
?>
<form method="post" id="signup" role="form">
<div class="row">
<div class="form-group col-xs-7">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-user"></span>
<input type="text" class="form-control" name="fullname" placeholder="Fullname" value=<?php echo $row["sfullname"]; ?>>
</div>
</div>
<div class="form-group col-xs-3">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-envelope"></span>
<input type="text" class="form-control email" name="email" placeholder="Email address">
</div>
</div>
<div class="form-group col-xs-7">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-earphone"></span>
<input type="text" class="form-control" name="mobile" placeholder="Mobile number">
</div>
</div>
<div class="form-group col-xs-3">
<div class="inner-addon left-addon">
<input type="date" class="form-control" name="dob">
</div>
</div>
<div class="form-group col-xs-7">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-map-marker"></span>
<input type="text" class="form-control" name="address" placeholder="Address">
</div>
</div>
<div class="form-group col-xs-3">
<select class="form-control" name="state" style="width: 100px;" >
<option value="">State</option>
<option>Gujrat</option>
<option>Maharashtra</option>
<option>Goa</option>
<option>Rajasthan</option>
</select>
</div>
<div class="form-group col-xs-7">
<div class="inner-addon right-addon">
<input type="password" id="password" class="form-control" name="createpass" placeholder="Create password">
</div>
</div>
<div class="form-group col-xs-3">
<select class="form-control" name="city" style="width: 100px;" >
<option value="">City</option>
<option>Ahmedabad</option>
<option>Mumbai</option>
<option>Kolkata</option>
<option>Delhi</option>
<option>Banglore</option>
<option>Chennai </option>
</select>
</div>
<div class="form-group col-xs-7">
<div class="inner-addon right-addon">
<input type="password" class="form-control" name="confirmpass" placeholder="Confirm password">
</div>
</div>
<div class="form-group col-xs-3">
<strong>Gender</strong>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
</div>
</div>
<div class="form-group ">
<center>
<!-- <input type="submit" name="sbt" value="Register" class="form-control btn-success"> -->
<button type="submit" name="sbt" class="btn"><span style="color: white;">Update</span></button>
</center>
</div>
</form>
<?php }?>
</div>
</div>
<!-- Jquery Plugin CDN -->
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Jquery Validation Plugin CDn -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
<!-- Linking Page to index.js for form validation -->
<script type="text/javascript" src="index.js"></script>
</body>
</html>
I want to display wholw string from my database into textbox but I am only able to display first word of that string. How can I display the whole string?
I have attached 2 images for reference, please look at them. In my database there is "abc xyz" in sfullname column and when I am selecting it only "abc" is displaying in the textbox...please refer images Please look this Database table
I want to display wholw string from my database into textbox but I am only able to display first word of that string. How can I display the whole string?
I have attached 2 images for reference, please look at them. In my database there is "abc xyz" in sfullname column and when I am selecting it only "abc" is displaying in the textbox...please refer images Please look this Database table
In your first input look here:
value=<?php echo $row["sfullname"]; ?>
Your value attribute is unquoted. Any spaces will result in the output you describe. Besides, it should be html-escaped as well, as a stray quote in the data will result in the same behavior.
Fix by quoting correctly:
value="<?php echo htmlspecialchars($row["sfullname"], ENT_QUOTES); ?>"
While I am here. empty() fits better for your if statement, so you probably want something more like:
if (empty($_SESSION["session_admin"])) {
header("location:index.php");
exit;
}
Don't forget to exit after a header redirection, else the rest of your code is executed.
Plus mandatory nag about using prepared queries - else you are open to SQL injection.
You are missing double quotes in the value attributes, your code looks like:
<input type="text" class="form-control" name="fullname" placeholder="Fullname" value=<?php echo $row["sfullname"]; ?>>
Plese try below one instead of your code:
<input type="text" class="form-control" name="fullname" placeholder="Fullname" value="<?php echo $row["sfullname"]; ?>">
I am using form to update my database through a php file but I am getting following error in Firefox :
The character encoding of the HTML document was not declared. The
document will render with garbled text in some browser configurations
if the document contains characters from outside the US-ASCII range.
The character encoding of the page must be declared in the document or
in the transfer protocol.
And following error in Chrome:
Calling Element.createShadowRoot() for an element which already hosts
a shadow root is deprecated. See
https://www.chromestatus.com/features/4668884095336448 for more
details
A complete blank page is shown once I click the submit button with above console message.
I am attaching my html and php file for the better idea.
register.html
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Info</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/scheduler.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container container-table" >
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2" >
<div class="panel panel-info" style="background-color:#ccc;">
<div class="panel-heading"style="background-color:#990000;">
<div class="panel-title" style="color:white; text-align:center">Register</div>
<!-- <div style="float:right; font-size: 80%; position: relative; top:-10px">Forgot password?</div>-->
</div>
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form action="register.php" id="loginform" class="form-horizontal" role="form" method="post">
<div style="margin-bottom: 20px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-education"></i></span>
<input id="login-username" type="text" class="form-control" name="sbuid" value="" placeholder="SBU ID">
</div>
<div style="margin-bottom: 20px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="stuName" value="" placeholder="Name">
</div>
<div style="margin-bottom: 20px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input id="login-username" type="text" class="form-control" name="emailID" value="" placeholder="Email ID">
</div>
<div style="margin-bottom: 20px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input id="login-username" type="text" class="form-control" name="contactInfo" value="" placeholder="Contact No.">
</div>
<div style="margin-bottom: 15px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="pass" placeholder="Password">
</div>
<div style="margin-top:10px;text-align:center" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls" >
<input type = "submit" value= "Register" class="btn btn-success"></input>
</div>
</div>
</form>
<div style="text-align:center">
<strong>Sign In </strong>
</div>
</div>
</div>
</div>
</div>
<div id = "footer" class="container-fluid text-center">
<p>INFO</p>
</div>
</body>
</html>
register.php
<?php
$sbuidreg = isset($_POST['sbuid']) ? htmlspecialchars($_POST['sbuid']):"NA";
$passreg = isset($_POST['pass']) ? htmlspecialchars($_POST['pass']):"NA";
$stuNamereg = isset($_POST['stuName']) ? htmlspecialchars($_POST['stuName']):"NA";
$emailIDreg = isset($_POST['emailID']) ? htmlspecialchars($_POST['emailID']):"NA";
$contactInforeg = isset($_POST['contactInfo']) ? htmlspecialchars($_POST['contactInfo']):"NA";
$myserver = "127.0.0.1:3306"
$database = "tcpscheduler";
$password = "rootpassword";
$username = "root";
// Connect to database
$con = mysqli_connect($myserver, $username, $password, $database);
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
mysqli_query($con,"INSERT INTO `loginsection` VALUES('$sbuidreg', '$passreg','$stuNamereg', '$emailIDreg','$contactInforeg')") or die("Strange Error");
echo "Account Created";
mysqli_close($con);
header('Location: index.html');
?>
I am looking to append the submitted form data with the most recent form data on top. Before I added the CSS the form data was appending nicely in order but on the right side.I would like to append in the middle with the nice border. Here is the PHP and CSS. Now it appears somewhat in the center with the nice border, but the text appears on top on the previous submitted form text.
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Explore</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link id="page_favicon" href="favicon.ico" rel="icon" type="image/x-icon" />
<!-- Optional theme -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="index.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="ddslick.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/40036711/Scripts/ddslick.js"></script>
<script type="text/javascript" src="searchlist/src/jquery-customselect.js"> </script>
<link rel="stylesheet" type="text/css" href="searchlist/src/jquery-customselect.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="timeago.js"></script>
<!-- GOOGLE API IMPORTANT -->
<link rel="stylesheet" href="main.css">
</head>
<body>
<ol class="breadcrumb" style="position: fixed; width:100%; z-index: 1000;">
<li> <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</li>
<li><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span> Hokie Passport</li>
<li> <span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Photos</li>
<li><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Weather</li>
</ol>
<div id="allContent" >
<div id="formData" >
<input class="button-warning pure-button" style ="position: fixed; bottom: 0px;"title="Clear page content"type="submit" name="clear" id="clearbtn" value="Clear">
<?php
#FOR THE DRIVERS ONLY
if (!isset($_SESSION['inputs'])) {
// initialize the saved input session variable the first time
$_SESSION['inputs'] = array();
}
if (isset($_POST['name']) || isset($_POST['nameTwo'])) {
array_push($_SESSION['inputs'], $_POST);
}
foreach (array_reverse($_SESSION['inputs']) as $input) {
if(isset($input['desiredNum']))
{
echo " <span class='trip'> <p class='driverAlert' > DRIVER </p> <img src='taxi.png' width ='50' height='50'title='driver'> {$input['name']}, Age: {$input['age']} <br> To: {$input['arriveLoc']} - From: {$input['departLoc']}<br>
Leaves: {$input['departDate']} Returns: {$input['returnDate']} <br> Will drive up to: {$input['desiredNum']} people
<br> Contact # {$input['email']} <br> <br> </span>
";
}
else
{
echo " <span class='trip'> <p class='riderAlert' > PASSENGER </p> <img src='rider.png' width ='50' height='50'title='rider'> {$input['nameTwo']}, Age: {$input['ageTwo']} <br> Would like to go to {$input['departLocTwo']} from {$input['arriveLocTwo']} on {$input['departDateTwo']} and return on
{$input['returnDateTwo']} <br> Contact # {$input['emailTwo']} <br> <br></span>
";
}
}
?>
</div>
<!-- States selector -->
<div id="rider">
<input class="button-success pure-button" type="button" id="riderbtn"value="Passenger"> <br>
<form action="vt.php" id="riderForm" method="post" class="form-inline">
<div class="form-group">
<input required type="text" class="form-control input-sm" required id="nameTwo" name="nameTwo" placeholder="Enter Name" autocomplete="off">
</div><br> <br>
<div class="form-group">
<input type="text" class="form-control input-sm" id="ageTwo" required name="ageTwo" placeholder="Enter Age" autocomplete="off">
</div> <br> <br>
<div class="form-group">
<input type="text" class="form-control input-sm" id="departLocTwo" required name="departLocTwo" autocomplete="off" placeholder="Departure Location">
</div><br> <br>
<div class="form-group">
<input type="text" class="form-control input-sm" id="arriveLocTwo" required name="arriveLocTwo" autocomplete="off"placeholder="Destination Location">
</div><br> <br>
<div class="form-group">
<input type="date" class="form-control input-sm" id="departDateTwo" required name="departDateTwo" autocomplete="off" placeholder="Depart Date">
</div><br> <br>
<div class="form-group">
<input type="date" class="form-control input-sm" id="returnDateTwo" required name="returnDateTwo" autocomplete="off" placeholder="Return Date">
</div> <br> <br>
<div class="form-group">
<input type="email" class="form-control input-sm" id="emailTwo" required name="emailTwo" autocomplete="off" placeholder="Email">
</div><br> <br>
<input class="btn btn-default" type="submit" value="Submit" onclick="submitRider();">
</form>
</div>
<div id="driver">
<input type="button" class="button-success pure-button" id="driverbtn"value="Driver">
<form action="vt.php" id="driverForm" method="post" class="form-inline">
<select class="form-control" id="desiredNum" name="desiredNum">
<option disabled>How many people may you drive?</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>
<br> <br>
<div class="form-group">
<input required type="text" class="form-control " id="name" required name="name" autocomplete="off" placeholder="Enter Name">
</div><br> <br>
<div class="form-group">
<input type="text" class="form-control " id="age" name="age" required autocomplete="off" placeholder="Enter Age">
</div> <br> <br>
<div class="form-group">
<input type="text" class="form-control " id="depart" name="departLoc" required autocomplete="off" placeholder="Departure Location">
</div><br> <br>
<div class="form-group">
<input type="text" class="form-control " id="arrive" name="arriveLoc" required autocomplete="off"placeholder="Destination Location">
</div><br> <br>
<div class="form-group">
<input type="date" class="form-control " id="departDate" name="departDate" required autocomplete="off"placeholder="Depart Date">
</div><br> <br>
<div class="form-group">
<input type="date" class="form-control " id="returnDate" name="returnDate" autocomplete="off" required placeholder="Return Date">
</div> <br> <br>
<div class="form-group">
<input type="email" class="form-control " id="email" required name="email" autocomplete="off" placeholder="Email">
</div><br> <br>
<input class="btn btn-default" type="submit" value="Submit" onclick="submitDriver();">
</form>
</div>
</div>
</body>
<script type="text/javascript">
$('#driverbtn').click(function()
{
$('#driverForm').toggle();
});
$('#riderbtn').click(function()
{
$('#riderForm').toggle();
});
$('#clearbtn').click(function()
{
$.post('clear.php', function()
{window.location = window.location.href;});
});
</script>
<script type="text/javascript">
$(document).ready( function(){
$('#states').ddslick();
});
</script>
<!--- End of rider data -->
</html>
.driverAlert
{
color: green;
}
.riderAlert
{
color:red;
}
body
{
background-color: white;
}
#allContent div
{
width: 33%;
position: relative;
float: left;
}
body
{
overflow-y: scroll;
}
#riderForm
{
display: none;
}
#driverForm
{
display: none;
}
#driverbtn
{
margin-top: 20px;
margin-bottom: 22px;
}
#riderbtn
{
margin-top: 20px;
margin-bottom: 22px;
}
#rider
{
position: fixed;
right: -450px;
}
#driver
{
position: fixed;
right: -200px;
}
#options
{
text-align: center;
}
.trip{
position: fixed;
top: 250px;
right:250px;
display: inline-block;
padding: 16px;
margin: 10px 0;
max-width: 468px;
border: #ddd 1px solid;
border-top-color: #eee;
border-bottom-color: #bbb;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
font: bold 14px/18px Helvetica, Arial, sans-serif;
color: #000;
}