•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 374,011 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,725 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 6152 | Replies: 7 | Solved
 |
•
•
Join Date: Jun 2005
Posts: 2
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
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
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
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.
•
•
Join Date: Jun 2005
Posts: 2
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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?
Can I use onLoad() to do that?
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
Ok, this is very rudimentary, but consider this page:
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.
<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.
•
•
Join Date: Dec 2004
Posts: 1,589
Reputation:
Rep Power: 7
Solved Threads: 34
Did that answer your question? Any feedback?
•
•
Join Date: Jul 2005
Posts: 10
Reputation:
Rep Power: 4
Solved Threads: 1
Newbie Poster
I am having a similar problem, and I dont have access to HEAD or BODY section, how can I use onload. this.onload ?
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- Easy drop down menu? (JavaScript / DHTML / AJAX)
- Problem using onload (JavaScript / DHTML / AJAX)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Passing paramter from javascript to jsp
- Next Thread: Flash within DHTML
