Как сохранить и отобразить ранее введенные значения в полях формы? - PullRequest
Новая
       13

Как сохранить и отобразить ранее введенные значения в полях формы?

2 голосов
/ 28 июня 2019

У меня 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 Ответ

2 голосов
/ 28 июня 2019

Например. 

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)
})
...