Use HTML Submit Button to Trigger Javascript Function

Page 1 of 1

11 Replies - 7544 Views - Last Post: 27 May 2011 - 04:15 AM

#1 SilentCodingOne  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 101
  • Joined: 08-November 07

Use HTML Submit Button to Trigger Javascript Function

Posted 15 September 2010 - 09:36 PM

I am trying to integrate Google Maps and Directions into a website. I can get the map to display and have added a simple html form with a preset destination address. The starting spot is blank as I want the final result to allow the visitor to get directions to the law firm which the site is for. The problem I am having is that when the submit button is clicked the map does not update and the directions do not display. The javascript works as I'm using on of the examples from Google except it used drop downs and auto updated when the drop downs changed. It is probably something simple that I am missing. Any help would be appreciated and I have included the code below. Also hope that I posted in the right forum as was not sure if it should go in HTML or javascript.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var ffzlaw = new google.maps.LatLng(43.221815,-77.834444);
    var myOptions = {
      zoom:15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: ffzlaw,
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var marker = new google.maps.Marker({
        position: ffzlaw, 
        map: map,
		});
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  }
  
  function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
</script>
</head>
<body onload="initialize()">
<div>
<form>
Starting Address: <input type="text" name="start" size="50" />
Ending Address: <input type="text" name="end" value="5500 West Ridge Road; Spencerport, NY 14559" size="50" />
<input type="button" value="Submit" name="calcRoute" onclick="calcRoute();"/>
</form>
</div>
<div id="map_canvas" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
</body>
</html>


Thanks again for your help

Is This A Good Question/Topic? 0
  • +

Replies To: Use HTML Submit Button to Trigger Javascript Function

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 87
  • View blog
  • Posts: 411
  • Joined: 28-July 09

Re: Use HTML Submit Button to Trigger Javascript Function

Posted 16 September 2010 - 08:41 AM

The problem might be the fact you are trying to pull the fields in Javascript by their ID but you give them Names not ID's...

Javascript:
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;

HTML:
Starting Address: <input type="text" name="start" size="50" />
Ending Address: <input type="text" name="end" value="5500 West Ridge Road; Spencerport, NY 14559" size="50" />


Change it so they have ID's ...

Javascript:
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;

HTML:
Starting Address: <input type="text" id="start" size="50" />
Ending Address: <input type="text" id="end" value="5500 West Ridge Road; Spencerport, NY 14559" size="50" />


OR change it so Javascript looks for their names ...

Javascript:
var start = document.getElementByName("start").value;
var end = document.getElementByName("end").value;

HTML:
Starting Address: <input type="text" name="start" size="50" />
Ending Address: <input type="text" name="end" value="5500 West Ridge Road; Spencerport, NY 14559" size="50" />


Hope this fixes your problem, if not or you need more help just ask and I'll do my best to help you! :)
Was This Post Helpful? 0
  • +
  • -

#3 SilentCodingOne  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 101
  • Joined: 08-November 07

Re: Use HTML Submit Button to Trigger Javascript Function

Posted 16 September 2010 - 09:06 AM

View PostKruithne, on 16 September 2010 - 07:41 AM, said:

The problem might be the fact you are trying to pull the fields in Javascript by their ID but you give them Names not ID's...

Javascript:
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;

HTML:
Starting Address: <input type="text" name="start" size="50" />
Ending Address: <input type="text" name="end" value="5500 West Ridge Road; Spencerport, NY 14559" size="50" />


Change it so they have ID's ...

Javascript:
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;

HTML:
Starting Address: <input type="text" id="start" size="50" />
Ending Address: <input type="text" id="end" value="5500 West Ridge Road; Spencerport, NY 14559" size="50" />


OR change it so Javascript looks for their names ...

Javascript:
var start = document.getElementByName("start").value;
var end = document.getElementByName("end").value;

HTML:
Starting Address: <input type="text" name="start" size="50" />
Ending Address: <input type="text" name="end" value="5500 West Ridge Road; Spencerport, NY 14559" size="50" />


Hope this fixes your problem, if not or you need more help just ask and I'll do my best to help you! :)


Thanks for your help but unfortunately it is still not working.
Was This Post Helpful? 0
  • +
  • -

#4 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 87
  • View blog
  • Posts: 411
  • Joined: 28-July 09

Re: Use HTML Submit Button to Trigger Javascript Function

Posted 16 September 2010 - 09:30 AM

So you want the user to type in their address and then it plots the driving directions to the law firm on the map, is this right? Just going to run shops now will be back in 5 and will have a look at getting it to work for you. :)
Was This Post Helpful? 0
  • +
  • -

#5 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 87
  • View blog
  • Posts: 411
  • Joined: 28-July 09

Re: Use HTML Submit Button to Trigger Javascript Function

Posted 16 September 2010 - 11:17 AM

Sorry for taking so long to reply - got lost in code of my own. Yes, after looking at it - I'm not sure why but it was a problem of two things. Firstly what I said above was causing it not to work. Secondly the calcRoute() function worked fine when renamed to c(). Maybe a Javascript case problem, I don't know. Anyway, the script works fine now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var ffzlaw = new google.maps.LatLng(43.221815,-77.834444);
    var myOptions = {
      zoom:15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: ffzlaw,
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var marker = new google.maps.Marker({
        position: ffzlaw, 
        map: map,
		});
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  }
  
  function c() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
</script>
</head>
<body onload="initialize()">
<div>
<form>
Starting Address: <input type="text" id="start" size="50" />
Ending Address: <input type="text" id="end" value="5500 West Ridge Road; Spencerport, NY 14559" size="50" />
<input type="button" value="Submit" name="calcRoute" onclick="c()"/>
</form>
</div>
<div id="map_canvas" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
</body>
</html>

Was This Post Helpful? 1
  • +
  • -

#6 SilentCodingOne  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 101
  • Joined: 08-November 07

Re: Use HTML Submit Button to Trigger Javascript Function

Posted 16 September 2010 - 12:01 PM

View PostKruithne, on 16 September 2010 - 08:30 AM, said:

So you want the user to type in their address and then it plots the driving directions to the law firm on the map, is this right? Just going to run shops now will be back in 5 and will have a look at getting it to work for you. :)



Yes that is correct. The destination will always be the same.
Was This Post Helpful? 0
  • +
  • -

#7 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 87
  • View blog
  • Posts: 411
  • Joined: 28-July 09

Re: Use HTML Submit Button to Trigger Javascript Function

Posted 16 September 2010 - 12:15 PM

View PostSilentCodingOne, on 16 September 2010 - 11:01 AM, said:

View PostKruithne, on 16 September 2010 - 08:30 AM, said:

So you want the user to type in their address and then it plots the driving directions to the law firm on the map, is this right? Just going to run shops now will be back in 5 and will have a look at getting it to work for you. :)



Yes that is correct. The destination will always be the same.


Look at my post below that one - should solve all your problems. :)
Was This Post Helpful? 0
  • +
  • -

#8 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 701
  • View blog
  • Posts: 8,577
  • Joined: 14-September 07

Re: Use HTML Submit Button to Trigger Javascript Function

Posted 16 September 2010 - 12:17 PM

Nevermind. You pretty much already have the issue solved.

This post has been edited by Nykc: 16 September 2010 - 12:20 PM

Was This Post Helpful? 0
  • +
  • -

#9 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 87
  • View blog
  • Posts: 411
  • Joined: 28-July 09

Re: Use HTML Submit Button to Trigger Javascript Function

Posted 16 September 2010 - 12:21 PM

View PostNykc, on 16 September 2010 - 11:17 AM, said:

I wrote a snippet on that.

http://www.dreaminco...snippet3141.htm


Sorry, I believe what he actually wanted, if you read above, is a javascript function that will pin the locations on the existing map on his page. If I am not mistaken your snippet redirects/opens a new page with a GoogleMap on with the entered locatios pinned. :)

This post has been edited by Kruithne: 16 September 2010 - 12:22 PM

Was This Post Helpful? 0
  • +
  • -

#10 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 701
  • View blog
  • Posts: 8,577
  • Joined: 14-September 07

Re: Use HTML Submit Button to Trigger Javascript Function

Posted 16 September 2010 - 12:26 PM

I miss-read the post so I edited it. You must have read it at the same time.

You can always tweak the code to open in the same page as well, hence the snippet portion (it is just a starter script - not a definitive solution).

Disregard my last post.
Was This Post Helpful? 0
  • +
  • -

#11 SilentCodingOne  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 101
  • Joined: 08-November 07

Re: Use HTML Submit Button to Trigger Javascript Function

Posted 16 September 2010 - 09:28 PM

View PostKruithne, on 16 September 2010 - 10:17 AM, said:

Sorry for taking so long to reply - got lost in code of my own. Yes, after looking at it - I'm not sure why but it was a problem of two things. Firstly what I said above was causing it not to work. Secondly the calcRoute() function worked fine when renamed to c(). Maybe a Javascript case problem, I don't know. Anyway, the script works fine now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var ffzlaw = new google.maps.LatLng(43.221815,-77.834444);
    var myOptions = {
      zoom:15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: ffzlaw,
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var marker = new google.maps.Marker({
        position: ffzlaw, 
        map: map,
		});
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
  }
  
  function c() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
</script>
</head>
<body onload="initialize()">
<div>
<form>
Starting Address: <input type="text" id="start" size="50" />
Ending Address: <input type="text" id="end" value="5500 West Ridge Road; Spencerport, NY 14559" size="50" />
<input type="button" value="Submit" name="calcRoute" onclick="c()"/>
</form>
</div>
<div id="map_canvas" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
</body>
</html>


Thanks for the help as it is now working.
Was This Post Helpful? 0
  • +
  • -

#12 satheesh18  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 27-May 11

Re: Use HTML Submit Button to Trigger Javascript Function

Posted 27 May 2011 - 04:15 AM

Hi

I try to use your code..but it shows error...

we want to call any services???

Thanks in advance.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1