Jump to content

Creating link via javascript


r4nd0m

Recommended Posts

Hi! First time posting here, so ive been struggling with some javascript and was hoping someone could fix this for me.

The problem I am having is I want it to create a link that looks something along these lines

"www.example.com/ChicagoNorthSide.html" If the options selected were chicago and north side, I cannot have any symbols/numbers in the link as I am using weebly as the webhost and their page creation methods only allow me to create pages with plain text and require .html at the end.

 

This code theoretically should work, but it isn't and I am getting % signs.

 

Anyway if someone can help that would be appreciated!

 

 

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var locations = {};
            locations["Locations"] = null;
            locations["Chicago"] = ["North side", "East Side", "South Side"];
            locations["New York"] = ["Bronx", "East Side", "Queens"];
            
            
            function clearOptions(list) {
                for (var i = list.options.length - 1; i >= 0; --i) {
                    list.remove(i);
                }
            }
            
            
            function loadOptions() {
                console.log('Loading Locations');
                
                document.getElementById('vicinityLabel').style.visibility = 'hidden';
                document.getElementById('vicinity').style.visibility = 'hidden';
                document.getElementById('submitButton').style.visibility = 'hidden';
                
                var location = document.getElementById('location');
                clearOptions(location);
                
                for (var i = 0; i < Object.keys(locations).length; ++i) {
                    var option = document.createElement('option');
                    option.text = Object.keys(locations)[i];
                    option.value = i;
                    option.disabled = i == 0;
                    option.selected = i == 0;
                    option.hidden = i == 0;
                    location.add(option, null);
                }
            }
            
            function showVicinityOptions(location) {
                console.log('Loading Vicinities');
                
                document.getElementById('submitButton').style.visibility = 'hidden';
                
                var vicinity = document.getElementById('vicinity');
                var key = Object.keys(locations)[location.options[location.selectedIndex].value];
                var options = locations[key].slice();
                
                options.splice(0, 0, "Vicinities");
                clearOptions(vicinity);
                
                for (var i = 0; i < options.length; ++i) {
                    var option = document.createElement('option');
                    option.text = options[i];
                    option.value = i;
                    option.disabled = i == 0;
                    option.selected = i == 0;
                    option.hidden = i == 0;
                    vicinity.add(option, null);
                }
                
                document.getElementById('vicinityLabel').style.visibility = 'visible';
                vicinity.style.visibility = 'visible';
            }
        
            function showSubmitButton(vicinity) {
                document.getElementById('submitButton').style.visibility = 'visible';
            }
        
            function gotoPage() {
                console.log('Submitted');
                
                var location = document.getElementById('location');
                var vicinity = document.getElementById('vicinity');
                
                var page = location.options[location.selectedIndex].text + vicinity.options[vicinity.selectedIndex].text;
                
                window.location.replace(page + '.html');
                return false;
            }
        </script>
    </head>
    
    <body onLoad="loadOptions()">
        <form id='locationForm' action="#" method="GET" onSubmit="return gotoPage()">
            <label id='locationLabel' for="location">Choose a location:</label>
            <select id="location" onChange="showVicinityOptions(this)">
            </select>
            
            
            <br /><br />
            
            <label id='vicinityLabel' for="vicinity">Choose a vicinity:</label>
            <select id="vicinity" onChange="showSubmitButton(this)">
            </select>
            
            <br /><br />
            
            <input id="submitButton" type="submit" value="Submit" />
        </form>
    </body>
</html>
Link to comment
Share on other sites

The reason for the '%' showing is because it is encoding the space between "North side" as 'North%20side' and its really bad to use links with spaces this way as the preferred way is to use a hyphen, because placing hyphen between each word and having it all lowercase is more SEO friendly and more readable by google using "chicago-north-side.html" compared to "ChicagoNorthSide.html" or Chicago_North_Side.html

 

I am pretty sure weebly allows hyphen. Personally if this is the case I would use current capitalized value for text of option list, and hyphenated lowercase for option values then you would just have to add hyphen between location an vicinity values, example location option value "chicago"(option text = Chicago") with vicinity option value "north-side" (option text = North Side) after

 

var page = location.options[location.selectedIndex].value +"-"+ vicinity.options[vicinity.selectedIndex].value;

 

page variable would become "chicago-north-side.html".

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...