Javascript Ajax jQuery Html PHP Example Quiz New MORE

jQuery submit form and then show results in an existing div

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Find a route using Geolocation and Google Maps API</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        #map {
            width: 100%;
            height: 400px;
            margin-top: 10px;
        }

        .myform {
            width: 50%;
            background-color: orange;
            padding-top: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <form id="calculate-route" class="myform" name="calculate-route" action="#" method="get">
        <div class="form-group">
            <label class="control-label col-sm-2" for="from">From:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="from" placeholder="Source"><a href=""></a>
            </div>
        </div>
        <br>
        <br>
        <br>
        <div class="form-group">
            <label class="control-label col-sm-2" for="to">To:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="to" placeholder="Destination">
            </div>
        </div>
        <br>
        <br>
        <center> <input type="submit" class="btn btn-success" />
            <input type="reset" class="btn btn-success" />
        </center>
    </form>
    <div id="map"></div>
    <p id="error"></p>
    <script>
        function calculateRoute(from, to) {
            /* Center initialized to Naples, Italy */
            var myOptions = {
                zoom: 10,
                center: new google.maps.LatLng(40.84, 14.25),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* Draw the map */
            var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
            var directionsService = new google.maps.DirectionsService();
            var directionsRequest = {
                origin: from,
                destination: to,
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC
            };
            directionsService.route(
                directionsRequest,
                function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        new google.maps.DirectionsRenderer({
                            map: mapObject,
                            directions: response
                        });
                    } else
                        $("#error").append("Unable to retrieve your route<br />");
                }
            );
        }
        $(document).ready(function() {
            /* If the browser supports the Geolocation API */
            if (typeof navigator.geolocation == "undefined") {
                $("#error").text("Your browser doesn't support the Geolocation API");
                return;
            }
            $("#from-link, #to-link").click(function(event) {
                event.preventDefault();
                var addressId = this.id.substring(0, this.id.indexOf("-"));
                navigator.geolocation.getCurrentPosition(function(position) {
                        var geocoder = new google.maps.Geocoder();
                        geocoder.geocode({
                                "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
                            },
                            function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK)
                                    $("#" + addressId).val(results[0].formatted_address);
                                else
                                    $("#error").append("Unable to retrieve your address<br />");
                            });
                    },
                    function(positionError) {
                        $("#error").append("Error: " + positionError.message + "<br />");
                    }, {
                        enableHighAccuracy: true,
                        timeout: 10 * 1000 /* 10 seconds */
                    });
            });
            $("#calculate-route").submit(function(event) {
                event.preventDefault();
                calculateRoute($("#from").val(), $("#to").val());
            });
        });
    </script>
</body>
</html>

Run it yourself