/    Sign up×
Community /Pin to ProfileBookmark

select box default to the value of a variable that is set when page loads

Copy linkTweet thisAlerts:
Jul 03.2014

I am trying to set up a HTML select box where the user can enter morning, noon and night. I also want this to editable if the user returns to the site.

If for example the user were to choose night, and then returned to the page a day later, when they open the page, the page would first fetch the users data and store it in a variable called “when”
When the select box loads i would like to to to determine the value of “when” (morning, noon or night) and set the select box to that value.

I can set the default to always return to morning. i.e.: <option value=”1″ SELECTED>Morning</option> but that won’t work for me. I have tried the following to use javascript but it isn’t working.

Any guidance would be greatly appreciated.

[code]

<script>

var when = Noon;

// I TRIED BOTH OF THE FOLLOWING:

document.getElementById(‘times’).options[“Noon”].selected = true;

document.getElementById(‘times’).options[2].selected = true;

</script>

*
<form name=”myForm” id=”myForm”>
****<select name=“times” id=“times”>
***** * *<option value=”1″>Morning</option>
***** * *<option value=”2″>Noon</option>
* * * ****<option value=”3″>Night</option>
****</select>
</form>

[/code]

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Jul 03.2014 — First a hard-won lesson: "Curly quotes" are poison in any sort of coding. You have them scattered all over your script and HTML. If you copied some of that code from a website be aware that some CMS/blog and forum scripts automatically make all quotes "curly". Also, make sure you are coding in either a text editor or some kind of coding editor. Never, ever, code/edit in a word processor.
[COLOR="#FF0000"]poison: ‘ ’ or “ ”[/COLOR]
[COLOR="#008000"]good: ' ' or " "[/COLOR]

That out of the way, try this:
[code=html]<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Choose time</title>
<script>
onload = function(){
var t = localStorage.time;
if (t != 'undefined'){
document.getElementById('times').value = t;
}
else{
document.getElementById('times').value = '0';
}
}

function setTime(el){
localStorage.time = el;
}
</script>
<body>

<form name="myForm" id="myForm">
<label for="times">Choose a time:</label><br>
<select name="times" id="times" onchange="setTime(this.value)">
<option value="0">--</option>
<option value="1">Morning</option>
<option value="2">Noon</option>
<option value="3">Night</option>
</select>
</form>

</body>
</html>[/code]
×

Success!

Help @needahobby spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...