JavaScript/HTML onSubmit="return Validation()" проблема
Я уже довольно долго искал и пробовал много изменений в моем коде, но, похоже, не могу найти ответ на мою проблему конкретно.
Что я пытаюсь сделать: я создал геокодер веб-страницы, который берет адрес, геокодирует его, позволяет пользователю манипулировать создателем карты, а затем сохраняет его в базе данных.
Проблема: функция 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>
1 ответ
Решение
Сама функция validate работает как положено (здесь jsFiddle).
Я должен был удалить primeMarker.setDraggable(false); Строка из моего примера, потому что я никогда не вызывал эту функцию - я думаю, что это то, что происходит с вами тоже. primeMarker устанавливается как объект в addMarker функция, которая вызывается, когда пользователь отправляет часть геокодирования формы. Если пользователь отправил без геокодирования, он ошибается, потому что primeMarker просто пусто
Итак, добавьте простую проверку перед этой строкой, чтобы убедиться, что она определена (вам, вероятно, следует проверить, что это на самом деле объект Marker, но этого будет достаточно):
function validateForm() {
if (typeof primeMarker != 'undefined')
primeMarker.setDraggable(false)
[ ... ]