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 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Question Better "Input Option" than prompt()

    The code below works as needed - but in Internet explorer the prompt box is just horrible by design and lacks ability to control or style it. Although I known several other ways to create user input boxes I am not sure how to integrate them into passing the variable to the script. Anyone able to provide a functional alternative within this code?

    Code:
    <script type="text/javascript"> 
    
         var directionsService = new google.maps.DirectionsService();
         var directionsDisplay = new google.maps.DirectionsRenderer();
    	 var addr=prompt("Please enter your address","Harry Potter");
    
         var map = new google.maps.Map(document.getElementById('map'), {
           zoom:7,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         });
    
         directionsDisplay.setMap(map);
         directionsDisplay.setPanel(document.getElementById('panel'));
    
         var request = {
           origin: addr, 
           destination: '1600 Pennsylvania Avenue, NW Washington, DC 20500',
           travelMode: google.maps.DirectionsTravelMode.DRIVING
         };
    
         directionsService.route(request, function(response, status) {
           if (status == google.maps.DirectionsStatus.OK) {
             directionsDisplay.setDirections(response);
           }
         });
       </script>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Prompts are indeed totally and completely obsolete. Use a textbox:-

    Please enter your address <input type = "text" id = "yraddress">

    and in script

    var addr = document.getElementById("yraddress").value;

    You will need to wrap the whole script in a function, say function show(), as otherwise the script will run as soon as the page loads,

    and to call it with either a button

    <input type = "button" value = "Show directions" onclick = "show()">

    or

    Please enter your address <input type = "text" id = "yraddress" onchange = "show()">

    which triggers the function when focus is removed from the textbox.

    Presumably you plan to include some validation to ensure that what is entered in the textbox as an address is sensible. I don't see how Harry Potter can be said to be a sensible response.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 03-19-2013 at 06:20 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    ARCLite Studio (03-19-2013)

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Thumbs up

    Philip,


    Worked just fine, Thank you. Wasn't sure if you could use the DOM object like that to pass into a Javascript variable.

    The "Harry Potter" thing was left over from the sample script I built this off of since the page/site is not live yet, but I thought it was humorous when the prompt box asked "what is your address harry potter" in firefox.

    I will eventually build validation into it but I am not very fluent with Javascript and it will take me some time to scour the net and grab what i need from various forums and samples.

    Thanks again!

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,775
    Thanks
    55
    Thanked 519 Times in 516 Posts
    I suspect that this line:
    Code:
           if (status == google.maps.DirectionsStatus.OK) {
    is a good start towards validating an address - you can see here:
    https://developers.google.com/maps/d...rectionsStatus

    the various other responses that you can get. All you need is some else's, or maybe a switch with the various cases provided for

  • #5
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    xelawho,

    That does go a long way to screen for address validity without a lot of extra validation code. I'll probably add that checking in before we push it live at the end of the week. Thanks for the link back to it on Google.


  •  

    Posting Permissions

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