Question

Currently I have a drop down box with all the options. After submit is pressed, the page is reloaded with all the selected variables in the url

http://127.0.0.1:8000/website/?var1=choice1&var2=choice3

So the same view is reloaded and the variables are collected and analysed by the view. Based on the selection, different data from the database is sent to this webpage page, thus making different tables load underneath this dropdown menu.

Is it possible to show the selected data in the form after the refresh? Something like this:

So far I’ve only used HTML. I thought that perhaps using jQuery I could get this to work, but the language is perplexing (though I’m very willing to learn, if someone knows how to do it with jQuery)

SOLUTION

Under Chris’ instructions, I managed to make this to work.
First of all, what didn’t work with Chris’ solution was the request.GET method. Therefore, inside the VIEW that calls return render_to_response('website.html') (so the corresponding view), I added the following piece of code:

requestDict = request.GET

return render_to_response('optionset.html', {'request':requestDict}) 

Inside my template therefore, I did the following:

<form action="" name="OptionSetForm">
     <select name="var1" size=2>
     <OPTGROUP LABEL="FirstPickHere">
            <option {% if request.var1 == "Choice1" %} selected="selected"{% endif %}>Choice1</option>
            <option {% if request.var1 == "Choice2" %} selected="selected"{% endif %}>Choice2</option>
            <option {% if request.var1 == "Choice3" %} selected="selected"{% endif %}>Choice3</option>
    </OPTGROUP>
    </select>
</form>

Make sure that you have spaces between the == and the two variables.

Answer 1

Since you’re using select boxes, you’ll need to add the following to each option:

<option value="choice1"{% if request.GET.var1 == "choice1" %} selected="selected"{% endif %}>Choice 1</option>

Or, if you’d rather use jQuery:

var queryString = window.location.search.substring(1);
var params = queryString.split('&');
for (var i=0; i<params.length; i++) {
    var param = params[i].split('=');
    $('[name='+param[0]+']').val(param[1])
}