Beginner - help with datetimepicker event

jsluke

11-18-2012, 10:43 PM

I have a simple web page with a form that uses the datetimepicker (http://www.javascriptkit.com/script/script2/tengcalendar.shtml)

Creating a form that uses a Post method is quite simple =>

<FORM ENCTYPE='multipart/form-data'
method='POST' action='http://<%=request.getServerName()%>:<%=request.getServerPort()%><%=request.getContextPath()%>/UploadServlet'>
<INPUT id="demo1" TYPE="text" NAME='date' size="25"><a href="javascript:NewCal('demo1','ddmmyyyy')"><img src="cal.gif" width="16" height="16" border="0" alt="Pick a date"></a><BR>
<INPUT TYPE='file' NAME='logfile'><BR>
<INPUT TYPE='submit' VALUE='upload'>
</FORM>

I would now like to change the code to call a javascript function automatically whenever a new date is selected.

I've tried using onchange but this doesn't seem to work =>

<INPUT id="demo1" TYPE="text" NAME='date' size="25" onchange="alert('Date Changed');"><a href="javascript:NewCal('demo1','ddmmyyyy')"><img src="cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

Any pointers would be appreciated.

Thanks.

James.

felgall

11-19-2012, 01:30 AM

with input fields use onblur instead of onchange

jsluke

11-19-2012, 09:43 PM

Thanks for the suggestion - that doesn't seem to make any difference.

I've posted the full HTML file here in case I'm doing something structurally wrong:

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Test Example</title>
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="./leaflet/leaflet.css" />

</head>
<body>
<div id="container" style="width:700px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Telemetry Application</h1></div>

<div id="trackselection" style="background-color:#FFD700;height:400px;width:100px;float:left;">
<INPUT id="TrackSelectDate" TYPE="text" NAME='date' size="25" onblur="alert('Date Modifier');"><a href="javascript:NewCal('TrackSelectDate','ddmmyyyy')"><img src="cal.gif" width="16" height="16" border="0" alt="Pick a date"></a><BR>
</div>

<div id="map" style="width: 600px; height: 400px"></div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Telemetry</div>

</div>

<script src="./leaflet/leaflet.js"></script>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map).bindPopup("I am a circle.");

L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map).bindPopup("I am a polygon.");

var popup = L.popup();

function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}

function onDateChange() {
alert('Date Changed')
}

map.on('click', onMapClick);
</script>
</body>
</html>

Thanks.

James.