I am trying to get the input box border for my name to change to red while displaying a message under neath it when the value is "". I am doing all of this in JavaScript. However, when I test it out, nothing happens. I checked the console and nothing is broken. Was wondering if someone could help me out and see where my error is.
<form id="customer_form" onsubmit="return customerFormValidation(this)" action="">
<h1 style="text-align: center">Billing Address</h1>
<div class="row">
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
<input type="text" id="firstname" name="firstname" placeholder="John M. Doe">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email" placeholder="john#example.com">
<label for="phone"><i class="fa fa-address-card-o"></i> Phone #</label>
<input type="text" id="phone" name="phone" placeholder="(123)-456-7890">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="address" name="address" placeholder="542 W. 15th Street">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city" placeholder="New York">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state" placeholder="NY">
</div>
<div class="col-50">
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip" placeholder="10001">
</div>
</div>
</form>
<button class="fa orange btn" type="submit" id="customerBtn">Next</button>
<script>
function customerFormValidation() {
reason = "";
reason += validateName(customer_form.firstname);
console.log(reason);
if (reason.length > 0) {
return false;
} else {
return false;
}
}
function validateName(firstname) {
var error = "";
if (firstname.value == "") {
document.getElementById("firstname").style.display = "block";
document.getElementById("firstname").innerText = "Please enter your name";
document.getElementById("firstname").style.borderColor = "red";
document.getElementById("firstname").focus();
} else {
firstname.style.background = 'White';
document.getElementById('firstname').innerHTML = "";
}
return error;
}
</script>
The problem is that your submit button is outside your form, so it can't trigger the form's submit event.
If you put the button inside the form, it works.
<form id="customer_form" onsubmit="return customerFormValidation(this)" action="">
<h1 style="text-align: center">Billing Address</h1>
<div class="row">
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
<input type="text" id="firstname" name="firstname" placeholder="John M. Doe">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email" placeholder="john#example.com">
<label for="phone"><i class="fa fa-address-card-o"></i> Phone #</label>
<input type="text" id="phone" name="phone" placeholder="(123)-456-7890">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="address" name="address" placeholder="542 W. 15th Street">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city" placeholder="New York">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state" placeholder="NY">
</div>
<div class="col-50">
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip" placeholder="10001">
</div>
</div>
<button class="fa orange btn" type="submit" id="customerBtn">Next</button>
</form>
<script>
function customerFormValidation() {
reason = "";
reason += validateName(customer_form.firstname);
console.log(reason);
if (reason.length > 0) {
return false;
} else {
return false;
}
}
function validateName(firstname) {
var error = "";
if (firstname.value == "") {
document.getElementById("firstname").style.display = "block";
document.getElementById("firstname").innerText = "Please enter your name";
document.getElementById("firstname").style.borderColor = "red";
document.getElementById("firstname").focus();
} else {
firstname.style.background = 'White';
document.getElementById('firstname').innerHTML = "";
}
return error;
}
</script>
Regards.
Related
I created a script for the registration form. In the username field, do not allow uppercase & spaces.
When I run the code below, there are 2 alerts ("Space case true" & "upper case true" ) when I press space on the keyboard. It should display only the alert "Space case true" if I press the space key. And "upper case true" if entered in an uppercase field. All errors in the column will be cleared.
is there something wrong with my code?
document.getElementById("usr").addEventListener("keypress", keyPress);
function keyPress(e) {
if (e.keyCode === 32) {
alert('Space case true');
return document.getElementById("usr").value = "";
}
}
function inputUsername(e) {
var character = document.getElementById("usr").value;
if (character === "") {
document.getElementById("usr").value;
} else if (character === character.toUpperCase() || character !== character.toLowerCase()) {
alert('upper case true');
document.getElementById("usr").value = "";
}
}
<form action="..." method="post">
<div class="form-group">
<label>First Name</label>
<input type="text" name="first_name" class="form-control" value="John">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="last_name" class="form-control" value="Doe">
<span class="help-block"><?php echo $last_name_err; ?></span>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" value="jdoe#doe.com">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Username</label>
<input type="text" id="usr" name="username" class="form-control" value="" oninput="inputUsername()">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" value="">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" value="">
<span class="help-block"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default" value="Clear">
</div>
<p>Already have an account? Login here.</p>
</form>
I have the following contact form:
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
In order to disable submit button until all input/textarea fields are filled, I'm using the following code:
post.oninput = function() {
var empty = false;
for (var i = 0; i < 5; i++) {
if (post[i].value.trim() === "") {
empty = true;
}
}
if (empty) {
post[5].disabled = true;
} else {
post[5].disabled = false;
}
};
It works perfectly.
post.oninput = function() {
var empty = false;
for (var i = 0; i < 5; i++) {
if (post[i].value.trim() === "") {
empty = true;
}
}
if (empty) {
post[5].disabled = true;
} else {
post[5].disabled = false;
}
};
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
But I would like to achieve the same result using methods such .filter, .find, .map or .some - if possible (the best one in terms of performance).
Would you give me some suggestions?
Use the :scope > [name] query string to select children of the form which are input-like, and if .some of them aren't filled, disable the button:
const post = document.querySelector('form');
post.oninput = function() {
post.querySelector('button').disabled = [...post.querySelectorAll(':scope > [name]')]
.some(input => !input.value.trim())
};
<form id="post">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="surname">Surname</label>
<input id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input id="email" name="email" type="text">
<label for="subject">Object</label>
<input id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea id="text" name="text"></textarea>
<button type="submit" disabled>Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
You could also use the required attribute, if it'll suit your needs, though the button won't appear disabled - rather, it'll redirect the user to the next required field:
<form id="post">
<label for="name">Name</label>
<input required id="name" name="name" type="text">
<label for="surname">Surname</label>
<input required id="surname" name="surname" type="text">
<label for="email">E-mail</label>
<input required id="email" name="email" type="text">
<label for="subject">Object</label>
<input required id="subject" name="subject" type="text">
<label for="text">Text</label>
<textarea required id="text" name="text"></textarea>
<button type="submit">Submit</button>
<!-- Honeypot -->
<div style="position:absolute;left:-5000px" aria-hidden="true">
<input type="text" name="ijdssliouhois8ds8989sd" tabindex="-1" value="">
</div>
<!-- /Honeypot -->
</form>
I was wondering if you can help me out with the following. I created a dropdown payment option. When I select "checking/savings account" the form displays 2 input fields so that the user can type in their banking account number and router number. This is what I want for this option. However, when I select the credit card option, the credit card form appears, but the banking form appears on top of it. Can someone tell me what I am doing wrong? Also, when I switch options back and forth, the forms do not change at all, but remain the same.
document.getElementById('paymentOptions').onchange = function () {
if (this.value == 'CreditCard') {
document.getElementById('CreditCard').style.display = 'block'
} else {
document.getElementById('Banking').style.display = 'block';
}
}
<div class="col-75">
<div class="container">
<form>
<label>Payment method</label>
<select id="paymentOptions" name="paymentOptions">
<option value="CreditCard">Credit Card</option>
<option value="BankingAccount">Checking/Savings Account</option>
</select>
<div class="row" id="Banking" style="display: none">
<div class="col-50">
<label for="ccnum">Bank Account</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
<div class="col-50">
<label for="ccnum">Routing Number</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
</div>
<div class="row" id="CreditCard" style="display: none">
<div class="col-50">
<label for="fname"><i class="fa fa-user"></i> Company Name</label>
<input type="text" id="fname" name="firstname">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="adr" name="address">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city">
<div class="row">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state">
</div>
<div class="col-50">
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip">
</div>
</div>
</div>
<div class="col-50">
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname">
<label for="ccnum">Credit card number</label>
<input type="text" id="ccnum" name="cardnumber">
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth">
<div class="row">
<div class="col-50">
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv">
</div>
</div>
</div>
</div>
<p>
<input type="checkbox" id="autopayment" />
<label for="autopayment">Enroll in autopayment</label>
</p>
<input type="submit" value="Submit payment" class="btn">
</form>
</div>
</div>
</div>
You have to hide the other value when that one is selected in other words toggling
document.getElementById('paymentOptions').onchange = function() {
if (this.value == 'CreditCard') {
document.getElementById('CreditCard').style.display = 'block'
document.getElementById('Banking').style.display = 'none'
} else {
document.getElementById('Banking').style.display = 'block';
document.getElementById('CreditCard').style.display = 'none'
}
}
The reason for the problems you are getting is that you change the display of your CreditCard div and Banking div to block but you do not change them back to display: none if they are not chosen.
Also you should add an onload listener to check what the initial value of your paymentOptions dropdown is to then change the display value of your 2 divs.
window.onload = () => {
const paymentOptionsSelect = document.getElementById("paymentOptions");
const selectedOption = paymentOptionsSelect.options[paymentOptionsSelect.selectedIndex].value;
if (selectedOption == 'CreditCard') {
document.getElementById('CreditCard').style.display = 'block'
document.getElementById('Banking').style.display = 'none';
}
else {
document.getElementById('Banking').style.display = 'block';
document.getElementById('CreditCard').style.display = 'none'
}
};
Look carefully at the 2 added lines in your change listener:
document.getElementById('paymentOptions').onchange = function () {
if (this.value == 'CreditCard') {
document.getElementById('CreditCard').style.display = 'block'
document.getElementById('Banking').style.display = 'none'; // set back to display none when CreditCard is not selected.
} else {
document.getElementById('Banking').style.display = 'block';
document.getElementById('CreditCard').style.display = 'none' // set back to display none when Banking is not selected.
}
}
Good luck!
Try with Jquery 3.3.1 approach, Hoping this can help you
$(document).ready(function(){
$("#paymentOptions").on('change', function(){
if ($(this).val() == 'CreditCard') {
$('#CreditCard').css('display','block');
$('#CreditCard').css('display','none');
} else {
$('#CreditCard').css('display','none');
$('#CreditCard').css('display','block');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-75">
<div class="container">
<form>
<label>Payment method</label>
<select id="paymentOptions" name="paymentOptions">
<option value="CreditCard">Credit Card</option>
<option value="BankingAccount">Checking/Savings Account</option>
</select>
<div class="row" id="Banking" style="display: none">
<div class="col-50">
<label for="ccnum">Bank Account</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
<div class="col-50">
<label for="ccnum">Routing Number</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
</div>
<div class="row" id="CreditCard" style="display: none">
<div class="col-50">
<label for="fname"><i class="fa fa-user"></i> Company Name</label>
<input type="text" id="fname" name="firstname">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="adr" name="address">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city">
<div class="row">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state">
</div>
<div class="col-50">
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip">
</div>
</div>
</div>
<div class="col-50">
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname">
<label for="ccnum">Credit card number</label>
<input type="text" id="ccnum" name="cardnumber">
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth">
<div class="row">
<div class="col-50">
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv">
</div>
</div>
</div>
</div>
<p>
<input type="checkbox" id="autopayment" />
<label for="autopayment">Enroll in autopayment</label>
</p>
<input type="submit" value="Submit payment" class="btn">
</form>
</div>
</div>
</div>
I have 4 text fields.If I have entered any data in these text fields,these values stored in my database using ajaxcall. I want to know how to validate these fields.My code is not works
$(document).ready(function()
{
function validateform(){
var name=document.regform.emailid.value;
var password=document.regform.passWord.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}
else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
<form class="text-center" style="width:90%;padding-left:25px" name="regform" onsubmit="return validateform()" >
<div class="form-group">
<input type="text" class="form-control" id="firstName" placeholder="firstName" name="firstName">
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" placeholder="lastName">
</div>
<div class="form-group">
<input type="text" class="form-control" id="emailid" placeholder="emailid" name="emailid" >
</div>
<div class="form-group">
<input type="text" class="form-control" id="passWord" placeholder="passWord" name="passWord">
</div>
<div class="form-group">
<input type="text" class="form-control" id="mobileNo" placeholder="mobileNo">
</div>
<button type="submit" class="btn btn-success btn-block" id="submitID">SUBMIT</button>
please correct my code?
$.post('url',{'send_post_var':'some_data'},function(result){});
I do have a Form and now I need to activate this form's field one by one. That mean If an user fill out first field correctly (Not empty and should be valid) then I need to activate second one and so on.
This is my HTML form:
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone" placeholder="Enter Phone Number" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
This is how I tried it in jquery:
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
$('.sequence').on('change blur keyup', enableNextElement);
});
This coding working for me but not work with validation. That mean if an user entered a not valid email next field is activating. But I want to keep next field disable till user entered a valid email.
Can anybody tell me how to do it?
UPDATED HTML
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<div class="element-right">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled>
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>
Thank you.
your both function call simultaneously and you havent mention sequence class to textboxes so you can try
http://jsfiddle.net/Vishnuk/uqfe2403/6/
html
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name sequence" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email sequence" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone sequence" placeholder="Enter Phone Number" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Script
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
enableNextElement(event);
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
});
Try this
$(".form-control").focusout(function() {
var t = $(this).val();
var k = $(this);
setTimeout(function() {
if (t) {
k.parent().parent().next(".form-group").find(".form-control").removeAttr('disabled');
} else {
k.parent().parent().nextAll(".form-group").children().find(".form-control").attr('disabled', '');
}
}, 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="form-group element-left">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
<div class="form-group element-right">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled>
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
<div class="form-group element-left">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>