Google Maps Address autocomplete

	<html>
	<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<title>Alumni Registration Form</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

	<style type="text/css">
	/* Credit to bootsnipp.com for the css for the color graph */
	.colorgraph {
	height: 5px;
	border-top: 0;
	background: #c4e17f;
	border-radius: 5px;
	background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
	background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
	background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
	background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
	}
	.pac-container:after {
	/* Disclaimer: not needed to show 'powered by Google' if also a Google Map is shown */

	background-image: none !important;
	height: 0px;
	}
	</style>
	</head>
	<body>
	<div class="container">

	<div class="row">
	<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
	<form role="form">
	<h3>Alumni Registration Form <small>Please fill your details</small></h3>
	<hr class="colorgraph">
	<div class="row">
	<div class="col-xs-12 col-sm-6 col-md-6">
	<div class="form-group">
	<input type="text" name="Student_f_name" class="form-control input-md" placeholder="First Name">
	</div>
	</div>
	<div class="col-xs-12 col-sm-6 col-md-6">
	<div class="form-group">
	<input type="text" name="Student_l_name" class="form-control input-md" placeholder="Last Name">
	</div>
	</div>
	</div>

	<div class="form-group">
	<input type="text" name="Father_Name" id="display_name" class="form-control input-md" placeholder="Father Name">
	</div>
	<div class="form-group">
	<input type="email" name="email" id="email" class="form-control input-md" placeholder="Email Address" tabindex="4">
	</div>
	<div class="form-group">
	<input type="text" name="Mobile" class="form-control input-md" placeholder="Mobile No">
	</div>
	<div class="row">
	<div class="col-xs-12 col-sm-6 col-md-6">
	<div class="form-group">
	<select name="Course" class="form-control">
	<option value="">Choose Course</option>
	<option value="">Intermediate</option>
	<option value="">BA</option>
	<option value="">HEP</option>
	<option value="">Choose Course</option>
	<option value="">Choose Course</option>
	</select>
	</div>
	</div>
	<div class="col-xs-12 col-sm-6 col-md-6">
	<div class="form-group">
	<select name="Course" class="form-control">
	<option value="">Choose Course</option>
	<option value="">Intermediate</option>
	<option value="">BA</option>
	<option value="">HEP</option>
	<option value="">Choose Course</option>
	<option value="">Choose Course</option>
	</select>
	</div>
	</div>
	</div>
	<div class="form-group">
	<select name="Course" class="form-control">
	<option value="">Choose Course</option>
	<option value="">Intermediate</option>
	<option value="">BA</option>
	<option value="">HEP</option>
	<option value="">Choose Course</option>
	<option value="">Choose Course</option>
	</select>
	</div>
	<div class="form-group">
	<select name="Course" class="form-control">
	<option value="" disabled selected>Choose Academic Year</option>
	<option value="2015">2015</option>
	<option value="2014">2014</option>
	<option value="2013">2013</option>
	<option value="2012">2012</option>
	<option value="2011">2011</option>
	<option value="2010">2010</option>
	<option value="2009">2009</option>
	<option value="2008">2008</option>
	<option value="2007">2007</option>
	<option value="2006">2006</option>
	<option value="2005">2005</option>
	<option value="2004">2004</option>
	<option value="2003">2003</option>
	<option value="2002">2002</option>
	<option value="2001">2001</option>
	<option value="2000">2000</option>
	<option value="1999">1999</option>
	<option value="1998">1998</option>
	<option value="1997">1997</option>
	<option value="1996">1996</option>
	<option value="1995">1995</option>
	<option value="1994">1994</option>
	<option value="1993">1993</option>
	<option value="1992">1992</option>
	<option value="1991">1991</option>
	<option value="1990">1990</option>
	<option value="1989">1989</option>
	<option value="1988">1988</option>
	<option value="1987">1987</option>
	<option value="1986">1986</option>
	<option value="1985">1985</option>
	<option value="1984">1984</option>
	<option value="1983">1983</option>
	<option value="1982">1982</option>
	<option value="1981">1981</option>
	<option value="1980">1980</option>
	<option value="1979">1979</option>
	<option value="1978">1978</option>
	<option value="1977">1977</option>
	<option value="1976">1976</option>
	<option value="1975">1975</option>
	<option value="1974">1974</option>
	<option value="1973">1973</option>
	<option value="1972">1972</option>
	<option value="1971">1971</option>
	<option value="1970">1970</option>
	<option value="1969">1969</option>
	<option value="1968">1968</option>
	<option value="1967">1967</option>
	<option value="1966">1966</option>
	<option value="1965">1965</option>
	<option value="1964">1964</option>
	<option value="1963">1963</option>
	<option value="1962">1962</option>
	<option value="1961">1961</option>
	<option value="1960">1960</option>
	<option value="1959">1959</option>
	<option value="1958">1958</option>
	<option value="1957">1957</option>
	<option value="1956">1956</option>
	<option value="1955">1955</option>
	<option value="1954">1954</option>
	<option value="1953">1953</option>
	<option value="1952">1952</option>
	<option value="1951">1951</option>

	</select>
	</div>
	<div class="form-group">
	<input type="text" class="form-control" name="address" id="geocomplete" required placeholder="Enter Address"/>
	<input type="hidden" name="country" />
	<input type="hidden" name="lat" />
	<input type="hidden" name="lng" />
	<input type="hidden" name="location" />
	<input type="hidden" name="country" />
	<input type="hidden" name="country_short" />
	<input type="hidden" name="administrative_area_level_1" data-id="state" />
	<input type="hidden" name="url" />
	<input type="hidden" name="formatted_address" />
	<input type="hidden" class="form-control" name="postal_code" required/>
	<div class="map_canvas" style="display:none !important"></div>
	</div>

	<hr class="colorgraph">
	<div class="row">
	<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-danger btn-block btn-lg" ></div>
	<div class="col-xs-12 col-md-6"><input type="reset" value="Reset" class="btn btn-primary btn-block btn-lg" ></div>
	</div>
	</form>
	</div>
	</div>

	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
	<script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
	<script>
	$(document).ready(function(){
	$("#geocomplete").geocomplete({
	map: ".map_canvas",
	details: "form",
	types: ["geocode", "establishment"],
	});
	});

	</script>
	</body>
	</html>

Google Maps Address autocomplete

0 comments:

Post a Comment

Popular Posts

Labels

Arsip Blog