I have a dropdown like this.
<select id='test'> <option value='one'>One</option> <option value='two'>Two</option> <option value='three'>Three</option> </select>
How can I show the selected value automatically at second time? First time it allows user to select an item from the drop down menu. But at second time it should show the previous selected value. How can I do this?
Advertisement
Answer
Your question is quite broad, so I will give you a short list of options:
Cookies
Session
In php you can save user data in a file, that is affiliated with ID saved in session cookie. PHP does all the stuff for you, all you need to do is to use the $_SESSION
variable.
Let this be the form:
form.php
<?php include "load.php";?> <form action="save.php"> <select id='test' name="select" method="post"> <option value='one' <?php if($_SESSION["sel"]=="one") echo "selected="selected"";?> >One</option> <option value='two' <?php if(...=="two") echo ...;?>>Two</option> <option value='three' <?php ...?>>Three</option> </select> </form>
Now, initally, $_SESSION
is not even defined, so we must load the data from session:
load.php
<?php /**NO TEXT OUTPUT ABOVE THIS LINE!!!**/ session_start(); if(!isset($_SESSION["sel"])) $_SESSION["sel"] = null; ?>
And this is where the form submits:
save.php
<?php /**NO TEXT OUTPUT ABOVE THIS LINE!!!**/ session_start(); $_SESSION["sel"] = $_POST["select"]; ?>
Just cookies
Using just cookies allows user to change data anytime. This might be useful sometimes to handy users (but unfortunatelly for hackers too, if you’re not careful).
PHP automatically generates $_COOKIE
array with all the cookies that are stored in users browser. (better said: that the user has sent)
I won’t make 3 file examples again, just see how cookies are created and deleted. Again, when setting a cookie, no output must come before the setcookie
call.
//Get a cookie if($_COOKIE["sel"] == "two") { ... do something ... } //Set a cookie: setcookie ("sel", $_POST["select"], time()+3600*24*7); //Expires in 7 days //Delete a cookie setcookie ("sel", "", 0); //Expired in 20th century
Local storage
This solution won’t let your server know about user’s setting. It might not be compatible with older browsers.
Local storage saves information on user’s HDD without informing the remote server. Here’s a menu that remembers it’s selected value:
<select id='test' onchange="remember(this.selectedIndex);"> <option disabled="disabled" selected="selected">Select something</option> <option value='one'>One</option> <option value='two'>Two</option> <option value='three'>Three</option> </select> <script type="text/javascript"> if(localStorage!=null) { if(localStorage["sel"]!=null) { document.getElementById("test").selectedIndex = localStorage["sel"]; } } //alert("d"); function remember(index) { if(localStorage!=null) { localStorage["sel"] = index; } } </script>