Click here to Skip to main content
15,066,651 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[^]
   
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
Thomas Daniels 2-Jun-18 13:45pm
   
I really don't know what you mean.
Member 13855652 2-Jun-18 13:46pm
   
Well my explanation seems inadequate. Basically, I wanna give the user the option to pick either the centre, the school or to put their own address in.
Thomas Daniels 2-Jun-18 13:48pm
   
Ah. There's an <input type="text"> tag
Member 13855652 2-Jun-18 13:51pm
   
ye exactly, but how would I include the tag into my options.
Thomas Daniels 2-Jun-18 13:53pm
   
You don't add it to your option tag. Add it separately to your form.
Member 13855652 2-Jun-18 13:55pm
   
Ohhh, that does make more sense. Thomas I can't thank you more you've practically made my day. Thank you.

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