I have been searching for quite some time now, and have tried many alterations to my code, but can't seem to find an answer to my issue specifically.
What I am trying to do: I have created a web page geocoder that takes an address, geocodes it, allows the user manipulation of the map maerker, then saves it to a database.
Issue: The validateForm() function gets called when the submit button is clicked, and works fine when all the text boxes are filled or the user has attempted to complete the form, but won't check the fields if the submit button is clicked before anything else has been altered on the page. I am looking to get this working so that the user can't submit a blank page.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<style type="text/css">
a.normal:link {text-decoration:none;}
p.rightcol {padding-left:1400px}
div.header {
padding: 0.5em;
color: blue;
background-color: #D0F5A9;
clear: left;
}
div.footer {
padding: 0.5em;
color: white;
background-color: #31B404;
clear: left;
}
html, body, #map-canvas {
height: 100%;
margin: 1px;
}
#panel {
width: 350px;
font-family: Arial, sans-serif;
font-size: 13px;
float: right;
margin: 10px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var geocoder;
var map;
var markers = [];
var drag = false;
var latLong;
var primeMarker;
var newlat
var newlon
//Creates geocoder and map.
function initialize() {
geocoder = new google.maps.Geocoder();
var mid = new google.maps.LatLng(45.4214, -75.6919);
var mapOptions = {
zoom: 12,
center: mid
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
//Geocodes address provided by user and displays Lat/Long and Full Address.
function codeAddress() {
address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (markers.length > 1) {
alert('You have already Geocoded an address.')
return;
}
if (status == google.maps.GeocoderStatus.OK) {
if (results.length > 1) {
document.getElementById("Multi").innerHTML = "Multiple matches of that address, please select the best match from the list below.";
removeOptions(document.getElementById("myList"));
var opt = document.createElement("option");
var select = document.getElementById("myList");
opt.text = "Please Choose Address";
opt.value = '';
select.options[0] = new Option(opt.text,opt.value);
for (var i = 0; i < results.length-1;i++) {
opt.text = results[i].formatted_address;
opt.value = results[i].formatted_address;
select.options[select.options.length] = new Option(opt.text,opt.value);
}
}
else {
removeOptions(document.getElementById("myList"));
document.getElementById("Multi").innerHTML = "";
map.setCenter(results[0].geometry.location);
map.setZoom(17);
latLong = results[0].geometry.location;
var addy = results[0].formatted_address;
var addy2 = addy.toString();
document.getElementById("fmtAddress").value=addy2;
marker = addMarker(results[0].geometry.location, drag);
document.getElementById("latbox").value = primeMarker.getPosition().lat();
document.getElementById("lngbox").value = primeMarker.getPosition().lng();
}
}
else if( document.getElementById('address').value == "" || document.getElementById('address').value == null) {
alert('Address box is emtpy, cannot geocode a blank address. Please fill in your address.');
}
else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
// Add a marker to the map.
function addMarker(location, drag) {
marker = new google.maps.Marker({
position: location,
map: map,
draggable: drag
});
primeMarker = marker;
markers.push(marker);
}
// Allows the user to edit the position of the marker.
function moveMarker() {
if (markers.length == 0) {
alert('There is no marker to edit. Please insert address and click "Geocode" to produce a marker.');
}
else {
drag = true;
clearMarkers();
addMarker(latLong, drag);
google.maps.event.addListener(primeMarker, 'dragend', function (event) {
newlat = this.getPosition().lat();
newlon = this.getPosition().lng();
document.getElementById("latbox").value = newlat;
document.getElementById("lngbox").value = newlon;
});
}
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
}
// Remove all items in listbox
function removeOptions(selectbox) {
var i;
for(i=selectbox.options.length-1;i>=0;i--){
selectbox.remove(i);
}
}
// Gets full address from list and sends it to codeAddress()
function newAddress() {
var x = document.getElementById("myList").selectedIndex;
document.getElementById("address").value = document.getElementById("myList").options[x].text;
codeAddress();
}
// Disables draggable marker and checks that values to be sent to database aren't empty
function validateForm() {
primeMarker.setDraggable(false);
var w = document.forms["myForm"]["address"].value;
var x = document.forms["myForm"]["addy"].value;
var y = document.forms["myForm"]["lat"].value;
var z = document.forms["myForm"]["lng"].value;
if (x==null || x=="" || w==null || w=="") {
alert("The address text box is empty. You might not have entered an address and clicked the 'Geocode' button.");
return false;
}
else if (y==null || y=="" || z==null || z=="") {
alert("The latitude and longitude text box is empty. You might not have entered an address and clicked the 'Geocode' button.");
return false;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="document.myForm.reset();">
<div class="header">
<img src="grey_logo.png" height="10%" width="10%"/>
<h1 class="header" align="center" ><font face="arial" color="black">Web-Based Geocoder Service</font></h1>
<p class="rightcol"><a class="normal" href="https://geo.grey.ca/LaunchPage/"> Grey County GIS </a></br>
<a class="normal" href="http://swiftnetwork.ca/">SWIFT Network Survey</a>
</p>
</div>
<div id="panel">
<form name="myForm" action="Update.asp" onsubmit="return validateForm()" method="post" >
<b>Enter Address To Be Geocoded:</b>
<input id="address" type="textbox" size="50" name="address">
<input type="button" value="Geocode" onclick="codeAddress()"></br></br>
<p id="Multi"></p>
<b>List of Address Options:</b>
<select id="myList" style="width: 330px;" onchange="newAddress()"-->
<option>List of possible addresses...</option>
</select></br></br>
<b>Full Formatted Address:</b>
<p><input size="50" type="text" id="fmtAddress" name="addy" ></p>
<p><b>Latitude:</b> <input size="20" type="text" id="latbox" name="lat" ></p>
<p><b>Longitude:</b> <input size="20" type="text" id="lngbox" name="lng" ></p>
<b>Edit Marker Location</b></br>
<input type="button" value="Edit Marker" onclick="moveMarker()"></br></br>
<b>Save New Location</b></br>
<button type="submit" value="submit" >Save</button>
</form>
</div>
<div id="map-canvas"></div>
<div class="footer" align="center">COPYRIGHT 2015 GREY COUNTY GIS. ALL RIGHTS RESERVED</div>
</body>
</html>
The validate function itself works as expected (jsFiddle here).
I had to remove the
primeMarker.setDraggable(false);line from my example because I never called that function - I think that's what's happening to you as well.primeMarkeris set as an object in theaddMarkerfunction, which is called when a user submits the geocoding part of the form. If a user submitted without geocoding, it errors out becauseprimeMarkeris just empty.So, add a simple check before that line to ensure it is defined (you should probably check that it's actually a Marker object, but this will suffice):
http://jsfiddle.net/daCrosby/56ugez8q/2/