lundi 13 avril 2015

Cannot find a javascript function in HTML

The form in this html has an onsubmit attribute which executes the codeAddress() function however in the Google Chrome Dev console it says that it cannot find it. The function is supposed to change the value of the "lat" and "lng" form inputs which have the display property set to "none" in a seperate css file. Then the values are to be sent to a php file for processing.



<html>
<head>
<link type="text/css" rel="stylesheet" href="map.css"/>
<link type="text/css" rel="stylesheet" href="newelements.css"/>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script src="my_js.js"></script>

<script type="text/javascript">

var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;

downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {};

google.maps.event.addListener(map, 'click', function( event ){
alert( "Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng() );
});

function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
);
} else {
alert('Geocode was not successful for the following reason: ' + status);
};
document.getElementById("lat").innerHTML = point.lat().toFixed(5);
document.getElementById("lng").innerHTML = point.lng().toFixed(5);
};

</script>

</head>

<body onload="load()">
<button type="button" id="krusts" onclick="div_show()" ></button>
<div id="map" ></div>

<div id="abc">

<div id="popupContact">

<form onsubmit="codeAddress()" action="registerEvent.php" id="form" method="post">

<h2 id="formvirsr">Ievadiet notikumu</h2>

<input id="nosaukums" name="nosaukums" placeholder="Nosaukums" type="text">
<input id="address" name="address" placeholder="Adrese" type="text">
<select name="veids" id="veids">
<option value="" disabled selected>Notikuma veids</option>
<option value="Viens">Viens</option>
<option value="Divi">Divi</option>
<option value="Tris">Tris</option>
<option value="Cetri">Cetri</option>
</select>
<input id="datums" name="datums" type="date">
<input id="laiks" name="laiks" type="time">
<input id="lat" name="lat" >
<input id="lng" name="lng" >
<textarea id="info" name="info" placeholder="Papildu info"></textarea>

<button type="submit" id="submit">Send</button>
<button type="button" id="close" onclick ="div_hide();">Close</button> <!-- aizversanas poga -->
<br>
</form>
</div>
</div>
</body>
</html>

Aucun commentaire:

Enregistrer un commentaire