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

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

Code:

<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 =>

Code:

<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:

Code:

<!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" />
	<!--[if lte IE 8]><link rel="stylesheet" href="./leaflet/leaflet.ie.css" /><![endif]-->
</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 &copy; <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.