1
我一直在尋找了一段時間，現在，已經嘗試了許多改變我的代碼，但似乎無法找到明確的答案我的問題。的JavaScript/HTML的onsubmit =「返回確認（）」的問題
我所試圖做的事情：我創建了一個網頁，地理編碼器，它接受一個地址，地址解析它，使地圖maerker的用戶操作，然後將其保存到數據庫中。
問題：validateForm（）函數在點擊提交按鈕時被調用，並且在所有文本框被填充或用戶試圖完成表單時工作正常，但不會檢查字段是否提交在頁面上的任何其他內容被更改之前單擊按鈕。我正在尋找這個工作，以便用戶不能提交一個空白頁面。
這裏是我的代碼：
<!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>
我覺得這應該工作，檢查你提交時函數是否被執行？你有調試過嗎？有時用js，如果程序的任何部分都有錯誤，有些代碼不會執行。 –
我已經做了一些大量的調試和DACrosby能指出我的驗證功能，用戶地理編碼地址之前未創建使用primeMarker的錯誤，等等，一個簡單的檢查固定我的問題。 –