<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="http://momentjs.com/downloads/moment-timezone-with-data.js"></script>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<div class="form-area">
<form role="form">
<br style="clear:both">
<h3 style="margin-bottom: 25px; text-align: center;">Book My Appointment</h3>
<div id="datepicker" class="calendar"></div>
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="emailid" placeholder="Email" required>
</div>
<div class="form-group">
<input type="mobile" class="form-control" id="mobile" name="contact" placeholder="Mobile Number" required>
</div>
<div class="form-group btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="gender" value="male" /> Male
</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="form-group">
<select name="branch" class="form-control">
<option name="branch" value="">--select branch--</option>
<option name="branch" value="option1">Madhapur</option>
<option name="branch" value="option2" >Hitech city</option>
<option name="branch" value="option3">Gachibowli</option>
</select>
</div>
<div class="form-group registration-date">
<div class="input-group registration-date-time">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span>
<input class="form-control" id="registration-date" type="date" name="appointdate">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
<input class="form-control" id="registration-time" type="time" name="appointtime">
</div>
</div>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="service[]" id="inlineCheckbox1" value="701"> service 1
</label>
<label class="checkbox-inline">
<input type="checkbox" name="service[]" id="inlineCheckbox2" value="702"> service 2
</label>
<label class="checkbox-inline">
<input type="checkbox" name="service[]" id="inlineCheckbox3" value="703"> service 3
</label>
</div>
<div class="form-group">
<textarea class="form-control" type="textarea" id="message" placeholder="Additional Services" maxlength="140" rows="3" name="additional_services"></textarea>
<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>
</div>
<button type="submit" id="submit" name="submit" class="btn btn-primary pull-right">Submit Form</button>
</form>
</div>
</div>
</div>
.red{
color:red;
}
.form-area
{
background-color: #FAFAFA;
padding: 10px 40px 60px;
margin: 10px 0px 60px;
border: 1px solid GREY;
}
body {
background: #f7f6f3;
font-family: sans-serif;
}
.calendar {
position: absolute;
width: 280px;
left: 50%;
top: 50%;
margin: -145px 0px 0px -140px;
background: #fff;
border-radius: 4px;
overflow: hidden;
}
.ui-datepicker-header {
height: 50px;
line-height: 50px;
color: #b0aead;
background: #e9e5e3;
margin-bottom: 10px;
}
.ui-datepicker-prev,
.ui-datepicker-next {
width: 20px;
height: 20px;
text-indent: 9999px;
border: 2px solid #b0aead;
border-radius: 100%;
cursor: pointer;
overflow: hidden;
margin-top: 12px;
}
.ui-datepicker-prev {
float: left;
margin-left: 12px;
}
.ui-datepicker-prev:after {
transform: rotate(45deg);
margin: -43px 0px 0px 8px;
}
.ui-datepicker-next {
float: right;
margin-right: 12px;
}
.ui-datepicker-next:after {
transform: rotate(-135deg);
margin: -43px 0px 0px 6px;
}
.ui-datepicker-prev:after,
.ui-datepicker-next:after {
content: '';
position: absolute;
display: block;
width: 4px;
height: 4px;
border-left: 2px solid #b0aead;
border-bottom: 2px solid #b0aead;
}
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover,
.ui-datepicker-prev:hover:after,
.ui-datepicker-next:hover:after {
border-color: #5ed1cc;
}
.ui-datepicker-title {
text-align: center;
}
.ui-datepicker-calendar {
width: 100%;
text-align: center;
}
.ui-datepicker-calendar thead tr th span {
display: block;
width: 40px;
color: #00a8b2;
margin-bottom: 5px;
font-size: 13px;
}
.ui-state-default {
display: block;
text-decoration: none;
color: #b5b5b5;
line-height: 40px;
font-size: 12px;
}
.ui-state-default:hover {
background: rgba(0,0,0,0.02);
}
.ui-state-highlight {
color: #8dd391;
}
.ui-state-active {
color: #5ed1cc;
}
.ui-datepicker-unselectable .ui-state-default {
color: #eee;
border: 2px solid transparent;
}
function addNow() {
nowDate = moment().tz("Europe/London").format('YYYY-MM-DD');
nowTime = moment().tz("Europe/London").format('HH:mm');
document.getElementById('registration-date').value = nowDate;
document.getElementById('registration-time').value = nowTime;
set = setTimeout(function () { addNow(); }, 1000);
}
function stopNow() {
clearTimeout(set);
}
$(document).ready(function(){
addNow();
stopNow();
$('#characterLeft').text('140 characters left');
$('#message').keydown(function () {
var max = 140;
var len = $(this).val().length;
if (len >= max) {
$('#characterLeft').text('You have reached the limit');
$('#characterLeft').addClass('red');
$('#btnSubmit').addClass('disabled');
}
else {
var ch = max - len;
$('#characterLeft').text(ch + ' characters left');
$('#btnSubmit').removeClass('disabled');
$('#characterLeft').removeClass('red');
}
});
// process the form
$('form').submit(function(event) {
debugger;
var checked = '';
$("input[name='service[]']:checked").each(function ()
{
checked = checked + $(this).val() + ',';
});
checked = checked.slice(0, -1);
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
"venueid":"55",
'name' : $('input[name=name]').val(),
'emailid' : $('input[name=emailid]').val(),
'contact' : $('input[name=contact]').val(),
"gender":$('.active input[name=gender]').val(),
//"appointdate":"2015/11/23",
//"appointtime":"13:00",
"appointdate":$('input[name=appointdate]').val(),
"appointtime":$('input[name=appointtime]').val(),
"branch":$('select[name=branch]').val(),
"allservices":checked,
"additional_services":$('textarea[name=additional_services]').val(),
};
console.log(formData);
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'http://laravel.bonsoul.com/create_walkin_appointmentfb', // the url where we want to POST
data : JSON.stringify(formData), // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
