Member Avatar for jman25

I am using javascript to display a dropdown menu on an html page. This menu lists 48 states and is used to calculate shipping costs to each state. I have an onChange() event in the <select> tag that sends the selected state to another function to figure up the shipping cost. The page is refreshed with 'location.href=location.href'. When the page is refreshed the shipping amount is displayed in the page. Everything works fine except for one thing.
When the page refreshes the State the user selected is not displayed in the dropdown box. It defaults back to the first option in the list.

It would be easy to fix this if the dropdown menu was submitted in a form but it is actually in the script itself. What would be an easy way to show the selected state in the box when the page is refreshed?

I have tried using a cookie but couldn't figure out how to make the selected state the active option. I am not too good with cookies so maybe I did something wrong.

How would I go about setting a cookie for a <select> and set the selected option 'Active' when the page reloads??

Thanks


http://www.j-1computers.com

  • 3 Contributors
  • 7 Replies
  • 431 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by shahdhruv
Member Avatar for tgreer

I would append a querystring, containing the value of the previously selected state. Then, author an onload script that checked for the querystring value, and make that the selected option in the select list. If there is no querystring (ie/ first time the page loads), then select some default state.

Member Avatar for jman25

Thank you for the reply. I tried what you suggested and now have it to where the index number of the selected option is appended to the URL. I had not thought of doing that. Good Idea!! But I still can't figure out how to get the index number to be the option selected. I tried using the onLoad() event but I couldn't get it to work. The select object is not in the actual page, it's in an external .js.
Can I use onLoad() to do that?

Member Avatar for tgreer

Ok, this is very rudimentary, but consider this page:

<html>
<head>
<script type="text/javascript">
function parseState()
{
  var q = unescape(location.search);
  q = q.substring(7, q.length);
  if (q != "")
  {
    document.getElementById("state").options.selectedIndex = q;
  }
}
</script>
</head>
<body onload="parseState();">
<form>
<select id="state">
<option value="" selected="selected">Select a State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</form>
</body>
</html>

If this page was named "pickstate.html", and you loaded it with the querystring:

pickstate.html?state=1

Then, "Alaska" would be selected in the SELECT element.

Why do I say it's rudimentary? For one, the querystring parser isn't robust. Ideally, you'd parse the entire querystring into a JavaScript array, so you could pass in multiple values. Not important in your scenario. Also, it relies on "?state=" having seven characters, intead of finding the value by searching for the equal sign.

Next, the index has no association with the actual value. I would create an array of state names, and instead of passing in the INDEX, I would pass in the two letter state value. I would DERIVE the index by finding the state abbreviation in the array.

But the point was to show you the mechanism. It doesn't matter if the SELECT element is built via an external JavaScript, as long as it is rendered onto the page.

Member Avatar for tgreer

Did that answer your question? Any feedback?

Member Avatar for shahdhruv

I am having a similar problem, and I dont have access to HEAD or BODY section, how can I use onload. this.onload ?

Member Avatar for tgreer

Please post your question in a new thread.

Member Avatar for shahdhruv

Thanks, I will.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.