1

I have the following drop down list:

Gender<select name="gender"  id="gender"> 
  <option value=" "> EMPTY </option> 
  <option value="Male">Male</option> 
  <option value="Female">Female</option> 
</select>

If I choose one of the options, it should stay selected as a primary option even if I renew the page. For example, if I choose Male, the dropdown list should keep Male as a selected option and this should only change when I click on it with the mouse. How to do this in JavaScript?

33528
  • 372
  • 6
  • 12
  • 30
  • You mean, when you refresh? Is there any server-side language involved here? – Ry- Feb 28 '13 at 15:50
  • 1
    localStorage (or dataStorage if old IEs) or as last resource cookies (unless you want to store user preferences on server side) (read [this](http://stackoverflow.com/questions/6534535/best-way-to-store-small-ui-user-preferences-in-web-app) too) – Adriano Repetti Feb 28 '13 at 15:51
  • yes when I refresh the page. I am using php also – 33528 Feb 28 '13 at 15:53
  • js can also parse data in a querystring. So could set form action to GET. But if this is js, why not just make it an ajax call and not refresh the page? – Kevin Seifert Feb 28 '13 at 15:54
  • 1
    If you are using PHP, then you typically redraw the component with PHP, not javascript. That or use Ajax and do it with JS and avoid the refresh – Kevin Seifert Feb 28 '13 at 15:56

4 Answers4

4

Here's a javascript/jquery way, using localStorage. If you're going to do this in a lot of places there are probably ways to optimize this code. 

$(function() {
    var genderValue = localStorage.getItem("genderValue");
    if(genderValue != null) {
        $("select[name=gender]").val(genderValue);
    }

    $("select[name=gender]").on("change", function() {
        localStorage.setItem("genderValue", $(this).val());
    });
})
Mike Robinson
  • 24,971
  • 8
  • 61
  • 83
0

HTML pages are stateless - meaning they don't remember state. In order to do what you describe we usually have the server-side code output different HTML depending on the values of the previously-submitted form.

There are JavaScript-only ways to to this using a URL hash, but you're going to need some server-side code to run your web site regardless.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
0

How about if you want to retain the value, when you navigate back to this page through an EDIT button on it successor page. Here is my post: Retain dynamically created DropDown list's selected value on event window.history.back()- JavaScript

Community
  • 1
  • 1
DeVeLoPeR
  • 11
  • 5
0

I was stuck on same thing here is a simple js solution. consider u have multiple options .

 <select name="min" id="min" style="padding: 5px;"  placeholder="Minutes" >

            {% for i in b %}
            <option value="{{i}}" >{{i}}</option>
            
            {% endfor %}

        

        </select>

and js for same is

<script>
window.onload = function(){
    
    v=document.getElementById("min");
    if ("{{min}}" ){
        v.value="{{min}}";
    }
}
here min in curly braces is accessing values from context in views.
naaz
  • 1
  • 1