Click here to Skip to main content
15,867,943 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Ive just recently gotten into code for entertainment purposes and have fallen upon a particularly dissatisfying situation. I'm trying to provide the user with options for a start and end location. They must select one of the options (an address) for the start, and one (an address again) for the end. Their input will then be put into this following link:

http://maps.google.com/maps?saddr="option chosen for start location" &daddr="option chosen for end location"

This link will be made once the user input is actually completed...

I would appreciate your help a considerable amount and implore you to help me please...

What I have tried:

Please don't judge my terrible coding.
I tried making it by doing this:

<div class=naviselection>
            
            <select id='start'>    
            Start:
            <option value: The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag>School</option>
            <option value: Centrum, Den Haag>City Center</option>
              
            
            End: 
            <select id='end'>
            <option value: The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag>School</option>
            <option value: Centrum, Den Haag>City Center</option>
            </div>

But from here I'm no longer certain as to what I'm supposed to do, how do I include the result of the selection into their respective locations in the link...
Posted
Updated 2-Jun-18 7:02am
v3

1 solution

First, you'll have to fix your "value" attributes: you need to follow the value="..." syntax, not value: .... Also add closing tags for select, and you cannot put "Start" inside the select.
HTML
<div class=naviselection>
  Start:
  <select id='start'>    
            <option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
            <option value="Centrum, Den Haag">City Center</option>
            </select> End:
  <select id='end'>
            <option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
            <option value="Centrum, Den Haag">City Center</option>
            </select>
</div>

Then, to get the link you want, you need to use JavaScript. You need to have a place to put the link in first, so add an element under your div where you can put the link in:
HTML
<span id="navigationLink"></span>

Then, the JavaScript. In your head-tag, put a script tag with these contents:
JavaScript
function updateNavigationLink() {
    var link = "https://maps.google.com/maps?saddr=" + encodeURIComponent(document.getElementById("start").value) + "&daddr=" + encodeURIComponent(document.getElementById("end").value);
    document.getElementById("navigationLink").textContent = link;
}

updateNavigationLink is the function responsible for updating the text of the element where the URL will be. encodeURIComponent makes sure to transform the values into valid URI components (encodeURIComponent() - JavaScript | MDN[^]).

Lastly, you need to make sure that this function actually gets called when you change the selected value. For that, add the onchange="updateNavigationLink()" attribute to both select tags:
HTML
<div class=naviselection>
  Start:
  <select id='start' onchange="updateNavigationLink()">    
            <option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
            <option value="Centrum, Den Haag">City Center</option>
            </select> End:
  <select id='end' onchange="updateNavigationLink()">
            <option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
            <option value="Centrum, Den Haag">City Center</option>
            </select>
</div>
<span id="navigationLink"></span>

Live demo: JSFiddle[^]
 
Share this answer
 
Comments
Member 13855652 2-Jun-18 13:03pm    
Thomas, my appreciation and gratitude is unfathomable, thank you so much
Thomas Daniels 2-Jun-18 13:03pm    
You're welcome!
Member 13855652 2-Jun-18 13:25pm    
An idea has come to mind, I'd like to create a form in which the user can insert their given location at the time of usage. I also want it to be an option but am uncertain as to how to do this. I know how to make a submittable form and acquire their input but I'm not sure how to integrate that form into an option tag...
Thomas Daniels 2-Jun-18 13:26pm    
I'm not sure how you want to "integrate a form into an option tag", but what you can do, is integrating an option into a form.
Member 13855652 2-Jun-18 13:41pm    
well, if I can have the different options as exemplified in the following:
start:
Center
School
Your Location=enter location here

End:
Center
School
Your Location=enter location here.

Thomas again I must thank you, really helping me out here

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900