javascript - Posting data to PHP using AJAX -

i new ajax , javascript please forgive me if acting stupid trying pass variable routemid php page processing.php(preferable automatically 1 routemid has been calculated) tried out code breaks entire webpage. attached snippet ajax part having trouble , php code on next page appreciated. again in advance!

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">  </script> <script type ="text/javascript" src="http://www.geocodezip.com/scripts/v3_epoly.js"></script> <script type="text/javascript">   var directiondisplay;   var directionsservice = new google.maps.directionsservice();   var map;   var polyline = null;   var infowindow = new google.maps.infowindow();   var addresses = <?php echo json_encode($addresses); ?>;  function createmarker(latlng, label, html) {     var contentstring = '<b>'+label+'</b><br>'+html;     var marker = new google.maps.marker({         position: latlng,         map: map,         title: label,         zindex: math.round(latlng.lat()*-100000)<<5         });         marker.myname = label;      google.maps.event.addlistener(marker, 'click', function() {         infowindow.setcontent(contentstring+"<br>"+marker.getposition().tourlvalue(6));          infowindow.open(map,marker);         });     return marker; }    function initialize() {     directionsdisplay = new google.maps.directionsrenderer({suppressmarkers:true});     var chicago = new google.maps.latlng(41.850033, -87.6500523);     var myoptions = {       zoom: 6,       maptypeid: google.maps.maptypeid.roadmap,       center: chicago     }     map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions);     polyline = new google.maps.polyline({     path: [],     strokecolor: '#ff0000',     strokeweight: 3     });     directionsdisplay.setmap(map);     calcroute();   }    function calcroute() {     var start = addresses[0];     var end = addresses[1];     var travelmode = google.maps.directionstravelmode.driving      var request = {         origin: start,         destination: end,         travelmode: travelmode     };     directionsservice.route(request, function(response, status) {       if (status == google.maps.directionsstatus.ok) {         polyline.setpath([]);         var bounds = new google.maps.latlngbounds();         startlocation = new object();         endlocation = new object();         directionsdisplay.setdirections(response);         var route = response.routes[0];         var summarypanel = document.getelementbyid("directions_panel");         summarypanel.innerhtml = "";          // each route, display summary information.     var path = response.routes[0].overview_path;     var legs = response.routes[0].legs;         (i=0;i<legs.length;i++) {           if (i == 0) {              startlocation.latlng = legs[i].start_location;             startlocation.address = legs[i].start_address;             marker = createmarker(legs[i].start_location,"midpoint","","green");           }           endlocation.latlng = legs[i].end_location;           endlocation.address = legs[i].end_address;           var steps = legs[i].steps;           (j=0;j<steps.length;j++) {             var nextsegment = steps[j].path;             (k=0;k<nextsegment.length;k++) {               polyline.getpath().push(nextsegment[k]);               bounds.extend(nextsegment[k]);             }           }         }          polyline.setmap(map);          computetotaldistance(response);       } else {         alert("directions response "+status);       }     });   }  var totaldist = 0; var totaltime = 0;        function computetotaldistance(result) {       totaldist = 0;       totaltime = 0;       var myroute = result.routes[0];       (i = 0; < myroute.legs.length; i++) {         totaldist += myroute.legs[i].distance.value;         totaltime += myroute.legs[i].duration.value;             }       putmarkeronroute(50);       var routemid = putmarkeronroute(50);       document.getelementbyid("hiddenval").value = routemid;               $(".clickable").click(function() {                 //alert($(this).attr('id'));                 $.ajax({                     type: "post",                     url: 'processing.php',                     data: { value : routemid }                 });             });         });         totaldist = totaldist / 1000.       }        function putmarkeronroute(percentage) {         var distance = (percentage/100) * totaldist;         var time = ((percentage/100) * totaltime/60).tofixed(2);         var routemidpoint;         if (!marker) {           marker = createmarker(polyline.getpointatdistance(distance),"time: "+time,"marker");           routemidpoint = polyline.getpointatdistance(distance);         } else {           marker.setposition(polyline.getpointatdistance(distance));           marker.settitle("time:"+time);           routemidpoint = polyline.getpointatdistance(distance);         }         return routemidpoint;       } </script> 

processing.php

<?php echo $_post["value"]; ?> 

i think trying accomplish:

$(document).ready(function() {  function computetotaldistance() {       totaldist = 0;       totaltime = 0;       var myroute = result.routes[0];       (i = 0; < myroute.legs.length; i++) {         totaldist += myroute.legs[i].distance.value;         totaltime += myroute.legs[i].duration.value;             }       putmarkeronroute(50);       var routemid = putmarkeronroute(50);       document.getelementbyid("hiddenval").value = routemid;        $.ajax({          type: "post",          url: 'processing.php',          data: { value : routemid },          success:function(result){             alert("returned php page: " + result);          }       });        totaldist = totaldist / 1000.          }  }); 

and can want ajax result. i'm not sure trying accomplish click(). if trying call above function work:

$(".clickable").click(function() {  computetotaldistance(); });