I've encountered this strange situation where jQuery.validation method works - validates the form, but for some reason blocks form submission even if all required conditions are met.
Form HTML and JS:
<div id="createcustomer">
<form method="POST" action="http://localhost/actionurl..." id="create-customer-form">
<div class="input-table">
<div class="input-row">
<div class="input-cell-label" >
Skrót (Kod)
</div>
<div class="input-cell">
<input type="text" id="input-shortname" name="shortname" class="required" maxlength="25" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Pełna nazwa
</div>
<div class="input-cell">
<input type="text" id="input-fullname" name="fullname" class="required" maxlength="255" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Adres
</div>
<div class="input-cell">
<input type="text" id="input-address" name="address" class="" maxlength="90" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Kod pocztowy
</div>
<div class="input-cell">
<input type="text" id="input-postal_code" name="postal_code" class="" maxlength="6" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Miasto
</div>
<div class="input-cell">
<input type="text" id="input-city" name="city" class="" maxlength="45" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Państwo
</div>
<div class="input-cell">
<input type="text" id="input-country" name="country" class="required" maxlength="45" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Telefon
</div>
<div class="input-cell">
<input type="text" id="input-phone" name="phone" class="" maxlength="45" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Faks
</div>
<div class="input-cell">
<input type="text" id="input-fax" name="fax" class="" maxlength="45" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Email
</div>
<div class="input-cell">
<input type="text" id="input-email" name="email" class="" maxlength="45" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Strona www
</div>
<div class="input-cell">
<input type="text" id="input-website" name="website" class="" maxlength="45" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell" >
</div>
<div class="input-cell" >
<input type="submit" name="submit_create" value="Utwórz" class="submit"/><input type="Reset" value="Wyczyść" />
</div>
</div>
</div>
</form>
<script>
$(function(){
$("#create-customer-form").validate();
});
$(document).ready(function(){
});
No error message, no bugs in firebug, no nothing. JS works stable. I've tried to simplify it and try with only 1 input field - the same result. Form works perfectly fine without validation method aplied.
How is this caused and how can I solve it?
Not sure if it will work for you, just try:
$(document).ready(function(){
$("#create-customer-form").validate({
submitHandler: function(form) {
form.submit();
}
});
});
Related
I've been stuck with this for quite some time now.
I want to get the values of input fields on click using jquery, but it always alerts "undefined"
$('.inputbox .updateAdvertiser').on('click', function() {
var name = $(this).siblings('.name').val();
var adId = $(this).siblings('.adId').val();
alert(adId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div class="inputbox">
<input type="text" class="name" value="mark">
<label>Name</label>
</div>
<div class="inputbox">
<input type="text" class="adId" value="1">
<label>Userid</label>
</div>
<div class="inputbox">
<input type="submit" value="Update" class="updateAdvertiser">
</div>
</div>
<div class="box">
<div class="inputbox">
<input type="text" class="name" value="Peter">
<label>Name</label>
</div>
<div class="inputbox">
<input type="text" class="adId" value="2">
<label>Userid</label>
</div>
<div class="inputbox">
<input type="submit" value="Update" class="updateAdvertiser">
</div>
</div>
siblings won't work outside parent element
$('.inputbox .updateAdvertiser').on('click', function() {
var parent = $(this).closest('.box');
var name = parent.find('.name').val();
var adId = parent.find('.adId').val();
alert(adId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div class="inputbox">
<input type="text" class="name" value="mark">
<label>Name</label>
</div>
<div class="inputbox">
<input type="text" class="adId" value="1">
<label>Userid</label>
</div>
<div class="inputbox">
<input type="submit" value="Update" class="updateAdvertiser">
</div>
</div>
<div class="box">
<div class="inputbox">
<input type="text" class="name" value="Peter">
<label>Name</label>
</div>
<div class="inputbox">
<input type="text" class="adId" value="2">
<label>Userid</label>
</div>
<div class="inputbox">
<input type="submit" value="Update" class="updateAdvertiser">
</div>
</div>
How can I add a warning to #printpage when its disabled if its chosen saying please check required fields?
// Set up a blur event handler for each text field
$('.form-control:not("#BusinessName")').on("blur", function(evt) {
let count = 0; // Keep track of how many are filled in
// Loop over all the text fields
$('.form-control:not("#BusinessName")').each(function(idx, el) {
// If the field is not empty....
if (el.value !== "") {
count++; // Increase the count
}
});
console.log(count);
// Test to see if all 3 are filled in
if (count === 3) {
$("#contactinformation").prop("checked", true); // Check the box
} else {
$("#contactinformation").prop("checked", false); // Uncheck the box
}
checkCheckboxes();
});
let checkboxes = [...document.querySelectorAll('input[type=checkbox].required')];
let checkCheckboxes = () => document.querySelector('#printpage').disabled = checkboxes.some(check => !check.checked);
checkboxes.forEach(check => check.addEventListener('input', checkCheckboxes));
checkCheckboxes();
$(document).on('click', '#printpage', function() {
alert('clicked');
if ($("#printpage").is(":disabled")) {
alert("Disabled");
} else {
alert("enabled");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactName">Contact name:</label>
<input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="BusinessName">Business name:</label>
<input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactEmail">Email address:</label>
<input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="form-group">
<label for="ContactPhone">Phone number (business hours):</label>
<input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" />
</div>
</div>
</div>
<div class="headline">
<h2>Checklist</h2>
</div>
<p><strong>Check applicable boxes, print and send in with paperwork.</strong></p>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="contactinformation" id="contactinformation" class="required" disabled/> Contact information
<font color="red">*Required</font>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="feesbreakdown" id="feesbreakdown" /> Estimate of fees - <span class="noprint">(click here to print)</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="money" id="money" /> Check or money order
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="certificatetitle" id="certificatetitle" class="required" /> Application for Certificate of Title - <span class="noprint">Form HSMV 82040</span>
<font color="red">*Required</font>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="proofidentification" id="proofidentification" class="required" /> Identification document
<font color="red">*Required</font>
<cfinclude template="../../../includes/proofidentificationtip.cfm">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="poa" id="poa" /> Power of attorney document - <span class="noprint">Form HSMV 82053</span>
<cfinclude template="../../../includes/poatip.cfm">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="title" id="title" /> Proof of ownership document
</div>
</div>
</div>
<cfif isDefined( "session.checkout.vehicle.ownership")>
<cfif session.checkout.vehicle.ownership is "OOS Title">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="vinverification" id="vinverification" class="required" /> VIN Verification - <span class="noprint">Form HSMV 82042</span>
<font color="red">*Required</font>
</div>
</div>
</div>
</cfif>
</cfif>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="billofsale" id="billofsale" /> Itemized dealer invoice, purchase order or Bill of Sale - <span class="noprint">(click here to print)</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="leaseagreement" id="leaseagreement" class="required" /> Lease agreement
<font color="red">*Required</font>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="insuranceaffidavit" id="insuranceaffidavit" class="required" /> Florida Insurance card, policy, binder or Florida Insurance Affidavit - <span class="noprint">Form HSMV 83330</span>
<font color="red">*Required</font>
<!---<cfinclude template="../../../includes/proofinsurancetip.cfm">--->
</div>
</div>
</div>
<cfif isDefined( "session.checkout.vehicle.transferring_vehicle_license")>
<cfif session.checkout.vehicle.transferring_vehicle_license is "Current">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="currentregistration" id="currentregistration" /> Proof of existing registration or license plate to transfer
</div>
</div>
</div>
</cfif>
</cfif>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="checkbox" name="proofresidency" id="proofresidency" /> Proof of Manatee County Residency document
<cfinclude template="../../../includes/proofresidencytip.cfm">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
*For a list of all other forms not listed above that may be applicable - <span class="noprint">(click here to print)</span>
</div>
</div>
</div>
<form method="post">
<br>
<div>
<button class="btn-u btn-u-orange" onclick="window.print(); return false;" name="printpage" id="printpage"><strong class="icon-printer"></strong> Print Checklist</button>
<button class="btn-u" type="submit" name="submit" id="submit"><strong class="icon-home"></strong> Finished</button>
</div>
I have tried to add an onclick handler. The printpage button does not show the alert when the printpage button is clicked and disabled but it does show enabled once the button is enabled. If a button is disabled it will not send an alert?
You can use JS function checkValidity(), this will return false if the form is not valid.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
isValid = $('.form').checkValidity()
if (!isValid) {
$('#printpage').innerText = "Please fill in required fields";
} else {
$('#printpage').innerText = "";
}
Your html should contain HTML validity checkers, such as required.
<input required type="text" class="thisIsAClass" />
I have different forms inside divs with different ids. What I am doing is that I am using radio buttons to disable their respective divs.
My code isn't working here is what I tried
$(document).ready(function() {
$('.address_type').change(function() {
if (this.value == '0') {
var id = $(this).attr('id');
$("#add_0_" + id).find("input[class='secondary']").prop("disabled", false);
} else {
$("#add_0_" + id).find("input[class='secondary']").prop("disabled", true);
}
});
});
<form action="/ali_store/order/place" method="POST">
<div class="collapse in" id="ali_store">
<div class="panel-body">
<input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2">
</div>
<hr />
<div class="panel-body">
Address Information
<div class="row">
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali_store" value="1" checked /> Use This Address
<div id="add_1_ali_store">
<br /> asd
<br /> asd,
<br /> xcv
<br /> sdf
</div>
</div>
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali_store" value="0" /> Use This Address
<div id="add_0_ali_store">
<div class="form-group">
<label class="col-lg-4">House no.</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_hno" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Street</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_street" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Area</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_area" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">City</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_city" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">State</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_state" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Postal Code</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_postal" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Phone</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_phone" class="secondary form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Mobile</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_mobile" class="secondary form-control" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div>
TOTAL: <strong>Rs. 186,145.00 /-</strong>
</div>
<input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" />
</div>
</div>
</form>
<form action="/ali2/order/place" method="POST">
<div class="collapse in" id="ali2">
<div class="panel-body">
<input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2">
</div>
<hr />
<div class="panel-body">
Address Information
<div class="row">
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali2" value="1" checked /> Use This Address
<div id="add_1_ali2">
<br /> asd
<br /> asd
<br /> asd
<br /> asd
</div>
</div>
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali2" value="0" /> Use This Address
<div id="add_0_ali2">
<div class="form-group">
<label class="col-lg-4">House no.</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_hno" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Street</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_street" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Area</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_area" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">City</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_city" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">State</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_state" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Postal Code</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_postal" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Phone</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_phone" class="secondary form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Mobile</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_mobile" class="secondary form-control" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div>
TOTAL: <strong>Rs. 1,331.00 /-</strong>
</div>
<input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" />
</div>
</div>
</form>
<form action="/ali3/order/place" method="POST">
<div class="collapse in" id="ali3">
<div class="panel-body">
<input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2">
</div>
<hr />
<div class="panel-body">
Address Information
<div class="row">
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali3" value="1" checked /> Use This Address
<div id="add_1_ali3">
<br /> dsa
<br /> dsa
<br /> dsa
<br /> dsa
</div>
</div>
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali3" value="0" /> Use This Address
<div id="add_0_ali3">
<div class="form-group">
<label class="col-lg-4">House no.</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_hno" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Street</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_street" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Area</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_area" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">City</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_city" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">State</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_state" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Postal Code</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_postal" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Phone</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_phone" class="secondary form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Mobile</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_mobile" class="secondary form-control" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div>
TOTAL: <strong>Rs. 1,500.00 /-</strong>
</div>
<input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" />
</div>
</div>
</form>
I want that if I change the radio button and it has value '0' then its input fields get disabled only else enabled.
You can write code like
$(document).ready(function() {
$('.address_type').change(function() {
if (this.value == '0') {
var id = $(this).attr('id');
$("#add_0_" + id).find("input.secondary").prop("disabled", false);
} else {
$("#add_0_" + id).find("input.secondary").prop("disabled", true);
}
});
});
my problem is that when I tried to put required on my input type date which is birthdate when I input date(4/29/2016) the required still shows and it won't let me submit my form. when I tried to remove the required attribute on my birthdate input it work fine... but what I want is to make the birthdate required.... I don't know why it won't work on date while it work just fine on other required inputs like full_name, gender and email
Since html5 doesn't work in Mozilla and IE
I use plugin for it to worked.
<!--HTML5 Date and Month Input Compatibility-->
<!-- cdn for modernizr-->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<!--end of compatibility-->
<script>
webshims.setOptions('waitReady', false);
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
</script>
Submit Button
<button type="submit" form="form-customer"
class="btn btn-primary pull-right" id="cmd_insert_customer" ng-show="tab == 3">
Insert Customer
</button>
FORM
<div class="row" ng-show="tab == 3">
<div class="col-md-12">
<form name="form" ng-submit="form.$valid && insertCustomer(form)" id="form-customer" class="css-form" novalidate >
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
<img src="{{profilePic}}" id="profile_picture" class="img-responsive img-thumbnail" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="file" name="image_path" id="image" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)" />
</div>
</div>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-md-7">
<label>Full Name*
<span class="required-label" ng-show="form.$submitted || form.full_name.$touched">
<span ng-show="form.full_name.$error.required">(Full Name is required.)</span>
</span>
</label>
<input type="text" ng-model="insertProfile.full_name" name="full_name" class="form-control" required="" />
</div>
</div>
<br />
<div class="row">
<div class="col-md-7">
<label>Gender*
<span class="required-label" ng-show="form.$submitted || form.gender.$touched">
<span ng-show="form.gender.$error.required">(Gender is required.)</span>
</span>
</label>
<select name="gender" class="form-control" ng-model="insertProfile.gender" required >
<option value ="">Select Gender</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
</select>
</div>
</div>
<br />
<div class="row">
<div class="col-md-7">
<label>Birth Date*
<span class="required-label" ng-show="form.$submitted || form.birth_date.$touched">
<span ng-show="form.birth_date.$error.required">(Birthdate is required.)</span>
</span>
</label>
<input type="date" name="birth_date" class="form-control" ng-model="insertProfile.birth_date" required />
</select>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-5">
<label>Mobile #</label>
<input type="number" name="mobile" value="" class="form-control" ng-model="insertProfile.mobile" />
</div>
<div class="col-md-5">
<label>Email*
<span class="required-label" ng-show="form.email.$error.email">(Invalid email address.)</span>
<span class="required-label" ng-show="form.$submitted || form.email.$touched">
<span ng-show="form.email.$error.required">(Email is required.)</span>
</span>
</label>
<input type="email" name="email" value="" class="form-control" ng-model="insertProfile.email" required />
</div>
</div>
<br />
<div class="row">
<div class="col-md-5">
<label>City</label>
<input type="text" name="city" value="" class="form-control" ng-model="insertProfile.city" />
</div>
<div class="col-md-5">
<label>Address</label>
<textarea name="address" class="form-control" rows="4" cols="50" ng-model="insertProfile.address" ></textarea>
</div>
</div>
</form>
</div>
</div>
I think that it doesn't work because AngularJS validates the type date with ISO-8601 format which is yyyy-mm-dd. So inputing the date with yyyy/mm/dd will result in invalid format that triggers the error. Please have a read in AngularJS documentation here for further information.
This is my UI for a registration form. As you can see the text-fields which entered number value (Service_fee, Supplier_price, Total) are hiding the half on entered value. I used bootsrap to design this UI. And I tried by changing txtfield's class property by using input-large.
** **
But still complete value is not showing.. :(
Given below is my code. Please help me..
<body>
<div class="container">
<form action="MobilePhoneRepairing.php" method="POST" class="form-inline">
<h1 class="font">Mobile Phone Registration</h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="span10" >
<div class="control-group form-horizontal">
<p>
<label class="floated" for="sdate"><b>Select Date :</b></label>
<input type="date" name="sdate" id="sdate" class="input-medium" />
<br class="clear"/>
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated" for="model_no"><b>Model no :</b></label>
<input type="text" name="model_no" id="model_no" class="input-medium" placeholder="Enter Modle No" />
<br class="clear" />
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated" for="service_fee"><b>Service fee :</b></label>
<input type="number" name="service_fee" id="service_fee" class="input-medium" />
<br class="clear" />
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated" for="sp_name"><b>Supplier name :</b></label>
<input type="text" name="sp_name" id="sp_name" class="input-medium" placeholder="Enter Supplier name " />
<br class="clear" />
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated" for="sp_price"><b>Supplier price :</b></label>
<input type="number" name="sp_price" id="sp_price" class="input-medium" onkeyup="doMath();"/>
<br class="clear" />
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated" for="description"><b>Description :</b></label>
<textarea class="textarea" name="description" rows="2" cols="12" placeholder="Enter item description"></textarea>
<br class="clear" />
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated " for="total"><b>Total :</b></label>
<input type="number" name="total" id="total" class="input-medium" />
<br class="clear" />
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated"> ∦ </label>
<input type="submit" class="btn-info " name="save_data" value="Save" id='savedata' />
<input type="reset" class="btn-primary " name="reset" value="Reset Form" id='reset' />
<br class="clear"/>
</p>
</div>
</div>
</form>
</div>
</body>
use CSS to add a customized height:
.input-medium{
height: 35px;
}
If this doesn't wok for you, try using "!important":
.input-medium{
height: 35px !important;
}
Hope it helps!