<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Edit Citizen</title>
<!-- Bootstrap Related Code -->
<link href="./bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- J-Query Related Code -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
.container {height: 100%;}
</style>
</head>
<body>
<!-- Bootstrap NavBar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.squeezeoj.com/index.php">BCLD8</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.squeezeoj.com/index.php">Home</a></li>
<li><a href="maps.html">Map</a></li>
<li><a href="citizens.php">Citizens</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://www.squeezeoj.com/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<div class="container">
<p><br/><br/></p>
<!-- BEGIN CONTENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<H1>Edit Citizen</H1>
<form name="mainform" id="mainform" action="citizens_edit_action.php" method="post">
<table>
<tr><td style="vertical-align:top; text-align:right; font-weight:bold;">Actions:</td><td><div style="text-align:left; font-weight:normal;"><input type="button" name="Delete" value="Delete" onclick="self.location='citizens_delete_confirmation.php?id=1'"><input type="submit" name="submit" value="Submit" style="width:200;"></div></td></tr>
<tr><td style="vertical-align:top; text-align:right; font-weight:bold;">ID:</td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="cid" id="cid" size="5" value="1" readonly></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">First Name:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="first" id="first" size="30" value="Jack"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">Last Name:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="last" id="last" size="50" value="Smith"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">Street 1:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="street1" id="street1" size="50" value="123 Main St."></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">Street 2:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="street2" id="street2" size="50" value=""></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">City:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="city" id="city" size="30" value="Anywhere"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">State:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="state" id="state" size="5" value="NY"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">Zip:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="zip" id="zip" size="5" value="99999"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">GeoLatitude:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="geolatitude" id="geolatitude" size="50" value="0"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">GeoLongitude:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="geolongitude" id="geolongitude" size="50" value="0"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">GeoAddress:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="geoaddress" id="geoaddress" size="50" value=""></div></td></tr>
<tr><td colspan=2>NOTE: This form cannot currently handle apostrophes in input. Need to sanitize fields before submitting to database.</td></tr>
<tr><td colspan=2> </td></tr>
<tr><td><div> </div></td><td><div><input type="button" value="Submit" onclick="GetLatitudeLongitude();"/></div></td></tr>
</table>
</form>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function GetLatitudeLongitude() {
//--- Build Address ---------------------------------------
var street = document.getElementById("street1");
var city = document.getElementById("city");
var state = document.getElementById("state");
var zip = document.getElementById("zip");
var address = street.value + ", " + city.value + ", " + state.value + " " + zip.value;
//--- Geocode Address -------------------------------------
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
//alert("Coordinates of " + address + " are\nLatitude: " + latitude + "\nLongitude: " + longitude);
document.getElementById("geolatitude").value = latitude;
document.getElementById("geolongitude").value = longitude;
document.getElementById("geoaddress").value = address;
}
});
//--- Trigger Form Submit -----------------------------------
document.getElementById("mainform").submit();
}
</script>
<!-- END CONTENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
</div>
</body>
</html>
<input type="button" value="Submit" onclick="GetLatitudeLongitude();"/></
<script type="text/javascript">
function GetLatitudeLongitude() {
//--- Build Address ---------------------------------------
var street = document.getElementById("street1");
var city = document.getElementById("city");
var state = document.getElementById("state");
var zip = document.getElementById("zip");
var address = street.value + ", " + city.value + ", " + state.value + " " + zip.value;
//--- Geocode Address -------------------------------------
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
//alert("Coordinates of " + address + " are\nLatitude: " + latitude + "\nLongitude: " + longitude);
document.getElementById("geolatitude").value = latitude;
document.getElementById("geolongitude").value = longitude;
document.getElementById("geoaddress").value = address;
//--- Trigger Form Submit -----------------------------------
document.getElementById("mainform").submit(); // LOCATION 1 SUBMITS BUT NO LAT / LONG VALUES
}
});
//--- Trigger Form Submit -----------------------------------
document.getElementById("mainform").submit(); // LOCATION 2 SUBMITS BUT NO LAT / LONG VALUES
}
</script>
<script type="text/javascript">
function GetLatitudeLongitude() {
//--- Build Address ---------------------------------------
var street = document.getElementById("street1");
var city = document.getElementById("city");
var state = document.getElementById("state");
var zip = document.getElementById("zip");
var address = street.value + ", " + city.value + ", " + state.value + " " + zip.value;
//--- Geocode Address -------------------------------------
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
//alert("Coordinates of " + address + " are\nLatitude: " + latitude + "\nLongitude: " + longitude);
document.getElementById("geolatitude").value = latitude;
document.getElementById("geolongitude").value = longitude;
document.getElementById("geoaddress").value = address;
//--- Trigger Form Submit -----------------------------------
document.getElementById("mainform").submit(); // LOCATION 1 SUBMITS BUT NO LAT / LONG VALUES
}
});
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Edit Citizen</title>
<!-- Bootstrap Related Code -->
<link href="./bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- J-Query Related Code -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
.container {height: 100%;}
</style>
</head>
<body>
<!-- Bootstrap NavBar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.squeezeoj.com/index.php">BCLD8</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.squeezeoj.com/index.php">Home</a></li>
<li><a href="maps.html">Map</a></li>
<li><a href="citizens.php">Citizens</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://www.squeezeoj.com/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<div class="container">
<p><br/><br/></p>
<!-- BEGIN CONTENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<H1>Edit Citizen</H1>
<form name="mainform" id="mainform" action="citizens_edit_action.php" method="post">
<table>
<tr><td style="vertical-align:top; text-align:right; font-weight:bold;">Actions:</td><td><div style="text-align:left; font-weight:normal;"><input type="button" name="Delete" value="Delete" onclick="self.location='citizens_delete_confirmation.php?id=1'"></div></td></tr>
<tr><td style="vertical-align:top; text-align:right; font-weight:bold;">ID:</td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="cid" id="cid" size="5" value="1" readonly></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">First Name:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="first" id="first" size="30" value="Jack"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">Last Name:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="last" id="last" size="50" value="Smith"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">Street 1:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="street1" id="street1" size="50" value="123 Main St."></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">Street 2:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="street2" id="street2" size="50" value=""></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">City:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="city" id="city" size="30" value="Anywhere"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">State:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="state" id="state" size="5" value="NY"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">Zip:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="zip" id="zip" size="5" value="99999"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">GeoLatitude:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="geolatitude" id="geolatitude" size="50" value="0"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">GeoLongitude:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="geolongitude" id="geolongitude" size="50" value="0"></div></td></tr>
<tr><td><div style="text-align:right; font-weight:bold;">GeoAddress:</div></td><td><div style="text-align:left; font-weight:normal;"><input type="text" name="geoaddress" id="geoaddress" size="50" value=""></div></td></tr>
<tr><td colspan=2>NOTE: This form cannot currently handle apostrophes in input. Need to sanitize fields before submitting to database.</td></tr>
<tr><td colspan=2> </td></tr>
<tr><td><div> </div></td><td><div><input name="form_submit" id="form_submit" type="button" value="Submit" onclick="GetLatitudeLongitude();"/></div></td></tr>
</table>
</form>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function GetLatitudeLongitude() {
//--- Build Address ---------------------------------------
var street = document.getElementById("street1");
var city = document.getElementById("city");
var state = document.getElementById("state");
var zip = document.getElementById("zip");
var address = street.value + ", " + city.value + ", " + state.value + " " + zip.value;
//--- Geocode Address -------------------------------------
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
alert("Coordinates of " + address + " are\nLatitude: " + latitude + "\nLongitude: " + longitude);
document.getElementById("geolatitude").value = latitude;
document.getElementById("geolongitude").value = longitude;
document.getElementById("geoaddress").value = address;
//--- Trigger Form Submit -----------------------------------
document.getElementById("mainform").submit(); // LOCATION 1 SUBMITS BUT NO LAT / LONG VALUES
}
});
}
</script>
<!-- END CONTENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
</div>
</body>
</html>