"Property Advance Option"
Bootstrap 3.3.0 Snippet by tarun90

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>More</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.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" /> <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#multicheck').multiselect({ includeSelectAllOption: true, enableFiltering: true, enableCaseInsensitiveFiltering: true, buttonWidth: '100%', filterPlaceholder: 'Search Amenities', }); }); </script> <script type="text/javascript"> $(function () { $('#multicheck2').multiselect({ includeSelectAllOption: true, enableFiltering: true, enableCaseInsensitiveFiltering: true, buttonWidth: '100%', filterPlaceholder: 'Search Furnishing', }); }); </script> <script type="text/javascript"> $(document).ready(function(){ var date_input=$('input[name="date"]'); //our date input has the name "date" var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; date_input.datepicker({ format: 'MM yyyy', container: container, todayHighlight: true, autoclose: true, }) }) </script> <script type="text/javascript"> $('#spinner2').spinner({min: 0, max: 10}) </script> </head> <body> <form> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="input-group"> <div id="tab" class="btn-group" data-toggle="buttons"> <a href="#prices" class="btn btn-default active" data-toggle="tab"> <input type="radio">Furnished</a> <a href="#features" class="btn btn-default" data-toggle="tab"> <input type="radio">Semifurnished</a> <a href="#requests" class="btn btn-default" data-toggle="tab"> <input type="radio">Unfurnished</a> </div> </div> </div> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon" >Bathroom</span> <span class="input-group-btn"> <button type="button" class="btn btn-default" data-value="-1" data-target="#spinner2" data-toggle="spinner"> <span class="glyphicon glyphicon-minus"></span> </button> </span> <input type="text" data-ride="spinner" id="spinner2" class="form-control input-number" value="1" data-min="1" data-max="10"> <span class="input-group-btn"> <button type="button" class="btn btn-default" data-value="2" data-target="#spinner2" data-toggle="spinner" data-on="mousehold"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </div> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon" >Flooring Type </span> <select class="form-control" id="sel1"> <option value="" disabled selected>Select Flooring Type</option> <option>Wooden flooring</option> <option>RAK/laminated wooden flooring</option> <option>Marble Granite Tiles</option> <option>Ceramic Porcelain Tiles</option> <option>Wood Finish Vinyl Flooring</option> </select> </div> </div> </div> <br> <div class="row"> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon" >Availability</span> <select class="form-control" id="availability" onchange="ShowHideDiv()"> <option value="UnderConstruction">Under Construction</option> <option value="ReadytoMove">Ready to Move</option> </select> </div> </div> <script type="text/javascript"> function ShowHideDiv() { var availability = document.getElementById("availability"); var availabilityselect = document.getElementById("availabilityselect"); availabilityselect.style.display = availability.value == "ReadytoMove" ? "block" : "none"; availabilityselect2.style.display = availability.value == "UnderConstruction" ? "block" : "none"; } </script> <div class="col-sm-4"> <div id="availabilityselect" style="display: none"> <div class="input-group"> <span class="input-group-addon" >Age of Property</span> <select class="form-control" id="sel1"> <option>New Property</option> <option>0 to 2 years</option> <option>2 to 5 years</option> <option>5 to 10 years</option> <option>More than 10 years</option> </select> </div> </div> <div id="availabilityselect2"> <div class="input-group"> <span class="input-group-addon" >Possession By</span> <input class="form-control" id="date" name="date" placeholder="Enter Possession Date" type="text"/> </div> </div> </div> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon" >Ownership</span> <select class="form-control" id="sel1"> <option>Freehold</option> <option>Leasehold</option> <option>Power of Attorney</option> <option>Co-operative Society</option> </select> </div> </div> </div> <br> <div class="row"> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon" >Transaction Type</span> <select class="form-control" id="sel1"> <option>New</option> <option>Resale</option> </select> </div> </div> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon" >Property on Floor</span> <select class="form-control" id="sel1"> <option value="" disabled selected>Select Property on Floor</option> <option>Basement</option> <option>Ground</option> <option>Upper Ground</option> <option>1st Floor</option> <option>2nd Floor</option> <option>3rd Floor</option> <option>4th Floor</option> <option>5th Floor</option> <option>6th Floor</option> <option>7th Floor</option> <option>8th Floor</option> <option>9th Floor</option> <option>10th Floor</option> <option>11th Floor</option> <option>12th Floor</option> </select> </div> </div> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon" >Facing</span> <select class="form-control" id="sel1"> <option value="" disabled selected>Select Facing</option> <option>East</option> <option>West</option> <option>North</option> <option>South</option> </select> </div> </div> </div> <br> <div class="row"> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon" >Amenities</span> <select id="multicheck" multiple="multiple"> <option value="1">Security / Fire Alarm</option> <option value="2">Centrally Air Conditioned</option> <option value="3">Lift(s)</option> <option value="4">Security Personnel</option> <option value="5">Cafeteria / Food Court</option> <option value="6">Visitors Parking</option> <option value="7">Service / Goods Lift</option> <option value="8">Maintainance Staff</option> <option value="9">Wifi</option> <option value="10">Eatrhquake Resistant</option> <option value="11">Conferance Room</option> <option value="12">Intercom facility</option> <option value="13">Fitness centre / Gym</option> <option value="14">Water Sotrage</option> </select> </div> </div> <div class="col-sm-4"> <div class="input-group"> <span class="input-group-addon" >Furnishing</span> <select id="multicheck2" multiple="multiple"> <option value="1">CCTV</option> <option value="2">Air Conditioner</option> <option value="3">Furniture</option> <option value="4">PC Desktop</option> <option value="5">Projector</option> <option value="6">LED Screen</option> <option value="7">Refrigrator</option> <option value="8">Water Dispenser</option> </select> </div> </div> <div class="col-sm-4"> <div class="input-group"> Listed By: <label class="radio-inline"><input type="radio" name="optradio" checked="checked">Agent</label> <label class="radio-inline"><input type="radio" name="optradio">Builder</label> <label class="radio-inline"><input type="radio" name="optradio">Owner</label> </div> </div> </div> <br> <div class="row"> <div class="text-right"> <button type="button" class="btn btn-primary">Submit</button> </div </div> </div> </form> </body> </html>

Related: See More

Argon Design System
Advance Password Validation

Questions / Comments: