如何在表单字段中保存和显示以前输入的值?

时间:2019-06-28 11:29:46

标签: html django django-forms django-templates django-views

我每页有2个forms。这是其中之一。

$('form').submit(function(e) {
  e.preventDefault();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
  
  <div>
    <label for="sum">Sum</label>
    <input id="sum" type="number">
  	
    <label for="currency">Currency</label>
    <select id="currency">
      <option value="KZT">KZT</option>
      <option value="USD">USD</option>
    </select>
  </div>
  
  <div>
    <label for="term">Term</label>
    <select id="term">
      <option value="1">1 month</option>
      <option value="3">3 months</option>
    </select>
  </div>
  
  <input type="submit" value="Submit">
  
</form>

forms.py

class CreditFilterForm(forms.Form):
    sum = forms.CharField()
    currency = forms.ChoiceField(choices = CURRENCY_CHOICES, ...)
    term = forms.ChoiceField(choices = PERIOD_CHOICES, ...)

views.py

CreitsListView(ListView):
...

def get(self):
    ...
    little_form = CreditFilterForm(self.request.GET or None, prefix="little")
    ...


class LittleFormView(FormView):
    form_class = CreditFilterForm
    prefix = 'little'

    def form_valid(self, form):
        ...

现在,当用户输入数据并重新加载页面(不提交)时,或者当他只是关闭页面并在一段时间后再次打开时, 输入的数据消失

如何保存和显示它们?必须使用caching。还是将输入的值存储在database中,然后替换它们?

1 个答案:

答案 0 :(得分:2)

例如。

function setVal(el) {
  var type = el.attr('type');
    if (type == 'number') {
      el.val(+localStorage.getItem(localStorage.key(i)))
    } else if (type == 'checkbox') {
        if (localStorage.getItem(localStorage.key(i)) == 'on') {
          el.prop('checked', true)
        }
    } else {
      el.val(localStorage.getItem(localStorage.key(i)))
    }
}

for (var i = 0; i < localStorage.length; i++){
  var el = $('#reservation').find('#'+ localStorage.key(i))
  setVal(el);
  var el = $('#big_form').find('#'+ localStorage.key(i))
  setVal(el);
}

$('#reservation').change(function(e){
  localStorage.setItem(e.target.id, e.target.value)
})

$('#big_form').change(function(e){
  localStorage.setItem(e.target.id, e.target.value)
})