r4nd0m Posted November 19, 2015 Share Posted November 19, 2015 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 More sharing options...
davej Posted November 19, 2015 Share Posted November 19, 2015 Why don't you simply replace "North side" with "North_side?" Or if it really bothers you to see that underscore then use replace in the code. http://www.w3schools.com/jsref/jsref_replace.asp Link to comment Share on other sites More sharing options...
dsonesuk Posted November 19, 2015 Share Posted November 19, 2015 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now