Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Beginner - help with datetimepicker event

    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.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,633
    Thanks
    0
    Thanked 649 Times in 639 Posts
    with input fields use onblur instead of onchange
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •