2

I have a form from Django defined as

from  django.forms.widgets import RadioSelect

class SequenceInputForm(forms.Form):
    sequence = forms.CharField(widget=forms.Textarea, validators=[validate_valid_dna_sequence])
    organism = forms.ChoiceField(widget=forms.RadioSelect(), initial=1,choices=[(1,"Human"),(2,"Rat"),(3,"Mouse")])

The Radio button in the django template is rendered as 

 {{ form.organism }}

That renders a form with a simple TextBox and a radio selector on a template.Typical user interaction results in text in the sequence field and a click of the radio button.

The app then returns results on a new page

Now if the user hits the "back" button on chrome to go back to the form from the results page. The Text box has the data entered..but the radio button is reset to its initial value.

This lack of memory for the entered value is only in Google Chrome. In Firefox and IE with the same application code...the form "remembers" its Radio button selected value.

How do I make the form remember the value when the user browses back from the results page in Google chrome.

I am sorry the browser specific behavior gives me the impression that it needs a browser specific solution , probably not in the Django code .

I had read somewhere that a workaround is to use the "html5" session storage API to save the state of the radio button. Is this the best/only way to handle this?

harijay
  • 11,303
  • 12
  • 38
  • 52
  • would a solution with a cookie be fine for you? I think that would be the best way to go. – CodeFanatic Jun 12 '14 at 08:15
  • I would prefer not having a cookie , but is it possible to use django session settings instead to do the same thing – harijay Jun 12 '14 at 18:59
  • this may be a related question: http://stackoverflow.com/questions/1195440/ajax-back-button-and-dom-updates – jproffitt Jun 13 '14 at 19:16

1 Answers1

2

You might like to use this library: http://garlicjs.org/

It does exactly what you ask for, i.e. use HTML5 session storage:

Garlic.js allows you to automatically persist your forms' text field values locally, until the form is submitted. This way, your users don't lose any precious data if they accidentally close their tab or browser.

It strives to have a javascript agnostic interface for UI/UX developers that might want to use it. Just add some data-persist="garlic" in your form tags, and you're good to go!

By default, the data won't persist on submission. You can change this option by adding data-destroy="false" to the form tag.

Pratyush
  • 5,108
  • 6
  • 41
  • 63