Javascript document.getElementById not returning full value from dropdown list
<p>My dropdown list is populating correctly from my MySQL DB. </p>

<p>When I select a marker of one word such as 'Home' the startname and endname vairables write correctly, the problem I am having is that when I have a value in the dropdown list with spaces only the first word is returned. </p>

<p>So if 'Central Park' is the value in the dropdown the variables are set to just 'Central'</p>

<p>Here is the code for the dropdown, the javascript for the calcroute function is below:</p>

<pre><code>     &lt;div id="control_panel" style="float:right;width:80%;text-align:left;padding-top:20px"&gt;
    &lt;div style="margin:20px;border-width:2px;"&gt;
    &lt;b&gt;Start:&lt;/b&gt;
    &lt;select id="start"&gt;
&lt;?php
  //php code to get data from mysql
    $prodQuery4=mysql_query("SELECT * FROM markers");
    while ($t=mysql_fetch_array($prodQuery4)) {
  //foreach/while to iterate through elements
    echo '&lt;option value='.$t['name'].'&gt;'.$t['name'].'&lt;/option&gt;';
    }
  //end of foreach/while
?&gt;    &lt;/select&gt;
&lt;br&gt;
    &lt;b&gt;End:&lt;/b&gt;
    &lt;select id="end"&gt;
 &lt;?php
  //php code to get data from mysql
    $prodQuery4=mysql_query("SELECT * FROM markers");
    while ($t=mysql_fetch_array($prodQuery4)) {
  //foreach/while to iterate through elements
    echo '&lt;option value='.$t['name'].'&gt;'.$t['name'].'&lt;/option&gt;';
    }
  //end of foreach/while
?&gt;    &lt;/select&gt;
    &lt;b&gt;Waypoints:&lt;/b&gt; 
    &lt;select multiple id="waypoints"&gt;
&lt;?php
  //php code to get data from mysql
    $prodQuery4=mysql_query("SELECT * FROM markers");
    while ($t=mysql_fetch_array($prodQuery4)) {
  //foreach/while to iterate through elements
    echo '&lt;option value='.$t['name'].'&gt;'.$t['name'].'&lt;/option&gt;';
    }
  //end of foreach/while
?&gt;    &lt;/select&gt;
      &lt;input type="submit" onclick="calcRoute();"&gt;
    &lt;/div&gt;
</code></pre>

<p>Javascript function:    </p>

<pre><code>function calcRoute() {
        var startname = document.getElementById('start').value;
        console.log(startname)
        var endname = document.getElementById('end').value;
        var waypts = [];
        var checkboxArray = document.getElementById('waypoints');
        for (var i = 0; i &lt; checkboxArray.length; i++) {
          if (checkboxArray.options[i].selected == true) {
              $.ajax({
                    url:'phpsearch2.php', 
                    dataType:'json', 
                    data:{name:checkboxArray[i].value},
                    async:false,
                    success:function (result)
                    {
    //              console.log(result)
                    waypoint = new google.maps.LatLng(result[0].lat, result[0].             lng);
            }});
            waypts.push({
                location:waypoint,
                stopover:true});
          }
        }

$.ajax({
    url:'phpsearch2.php', 
    dataType:'json', 
    data:{name:startname},
    async:false,
    success:function (result)
{
//  console.log(result)
    origin = new google.maps.LatLng(result[0].lat, result[0].lng);
}});

$.ajax({
    url:'phpsearch2.php', 
    dataType:'json', 
    data:{name:endname},
    async:false,
    success:function (result)
{
//  console.log(result)
    end = new google.maps.LatLng(result[0].lat, result[0].lng);
}});

    var request = {
            origin: origin,
            destination: end,
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.WALKING
        };

            directionsService.route(request, function(response, status) {
        document.write('&lt;b&gt;'+ origin +'&lt;/b&gt;');
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            var summaryPanel = document.getElementById('directions_panel');
            summaryPanel.innerHTML = '';
            // For each route, display summary information.
            for (var i = 0; i &lt; route.legs.length; i++) {
              var routeSegment = i + 1;
              summaryPanel.innerHTML += '&lt;b&gt;Time for a Walkabout &lt;/b&gt;&lt;br&gt;';
              summaryPanel.innerHTML += '&lt;b&gt;From ' + startname + '   &lt;/b&gt;';
              summaryPanel.innerHTML += '&lt;b&gt;to ' + endname + '('+ route.legs[i].distance.text +')&lt;/b&gt;&lt;br&gt;';
//            summaryPanel.innerHtml += '&lt;b&gt;' + waypts.toString() + '   &lt;/b&gt;';
          } 
          }
        });
     }
//}
</code></pre>
