Django Form Wizard-如何防止重置字段值?

时间:2018-12-06 20:44:17

标签: javascript python html django django-formwizard

我正在使用Django表单向导填写多步骤表单,将其输入并保存到数据库中,但所有问题都是我使用“上一个”浏览步骤时看到的清晰字段里面没有数据。我只想在回去时将数据显示在那里以供参考。

这是我的表格。py

`class AppEditForm(forms.Form):
#App Name
    applicationfullname   = forms.CharField(label='Application Full Name: ', max_length=80, required = False)
#Full Name
    applicationabbreviatedname = forms.CharField(label='Application Abbreviated Name: ', max_length=40, required = False)


class AppEditForm1(forms.Form):
#Business Sponser
    businesssponsoredwpersonid = forms.CharField(widget= autocomplete.Select2(url='WorkerDim_ac', attrs={'data-placeholder': 'Search values', 'data-width': '25em'}), required = False, label="Business Sponsor Name: ")
#Application Owner
    applicationowneredwpersonid = forms.CharField(widget= autocomplete.Select2(url='WorkerDim_ac', attrs={'data-placeholder': 'Search values', 'data-width': '25em'}), required = False, label='Application Owner Name: ')
#Business Owner
    businessowneredwpersonid = forms.CharField(widget= autocomplete.Select2(url='WorkerDim_ac', attrs={'data-placeholder': 'Search values', 'data-width': '25em'}), required = False, label='Business Owner Name: ')

`

这是我的html

<!DOCTYPE html>
{% extends "newapp/base.html" %}
{% load i18n static %}
{% load staticfiles %}
{% load crispy_forms_tags %}
{% block title %}Addapplication{% endblock title %}
{% block head %}
{{ wizard.form.media }}
<link rel="stylesheet" href="{% static 'css/addapplication.css' %}">
<script type='text/javascript'>function formProcess(){
      var capture = document.forms['input']['id_1applicationfullname'].value + '<br>';
      capture += document.forms['input']['id_1applicationabbreviatedname'].value + '<br>';
      capture += document.forms['input'][''].value + '<br>';
      capture += document.forms['input'][''].value + '<br>';
      document.getElementById('outputDiv').innerHTML = capture;
}
</script>
{% endblock %}
{% block body_block%}

  <div class="container">
        <div class="jumbotron" id=tablet>
          <div class="container" style="text-align: center">
            <h2>Add Application</h2>
          </div>

          <form  method="post" >
          <div class="row drpClass">
            <div class="container" id="outputDiv">
              <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item">
                      <a class="nav-link text-center {% if wizard.steps.current == '1' %} active  {% endif %}" name='wizard_goto_step' value = '1' style="margin-top: 5px; margin-left: 5px; padding-left: 8px; padding-right: 8px; border: 2px;" role="tab"><i class="fa fa-info-circle"></i><p>Application Info</p></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link text-center {% if wizard.steps.current == '2' %} active  {% endif %}" name='wizard_goto_step' value = '2' style="margin-top: 5px; margin-left: 5px; padding-left: 8px; padding-right: 8px; border: 2px;"  role="tab"><i class="fa fa-id-card"></i><p>Ownership</p></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link text-center {% if wizard.steps.current == '3' %} active  {% endif %}" name='wizard_goto_step' value = '3' style="margin-top: 5px; margin-left: 5px; padding-left: 8px; padding-right: 8px; border: 2px;"  role="tab"><i class="fa fa-area-chart"></i><p>Application Type</p></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link text-center {% if wizard.steps.current == '4' %} active  {% endif %}" name='wizard_goto_step' value = '4' style="margin-top: 5px; margin-left: 5px; padding-left: 8px; padding-right: 8px; border: 2px;"  role="tab"><i class="fa fa-table"></i><p>Application Details</p></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link text-center {% if wizard.steps.current == '5' %} active  {% endif %}" name='wizard_goto_step' value = '5' style="margin-top: 5px; margin-left: 5px; padding-left: 8px; padding-right: 8px; border: 2px;"  role="tab"><i class="fa fa-life-ring"></i><p>Application Support</p></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link text-center {% if wizard.steps.current == '6' %} active  {% endif %}" name='wizard_goto_step' value = '6' style="margin-top: 5px; margin-left: 5px; padding-left: 8px; padding-right: 8px; border: 2px;"  role="tab"><i class="fa fa-usd"></i><p>Application Cost</p></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link text-center {% if wizard.steps.current == '7' %} active  {% endif %}" name='wizard_goto_step' value = '7' style="margin-top: 5px; margin-left: 5px; padding-left: 8px; padding-right: 8px; border: 2px;"  role="tab"><i class="fa fa-certificate"></i><p>Application License / Users</p></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link text-center {% if wizard.steps.current == '8' %} active  {% endif %}" name='wizard_goto_step' value = '8' style="margin-top: 5px; margin-left: 5px; padding-left: 8px; padding-right: 8px; border: 2px;"  role="tab"><i class="fa fa-handshake-o"></i><p>Application Vendor</p></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link text-center {% if wizard.steps.current == '9' %} active  {% endif %}" name='wizard_goto_step' value = '9' style="margin-top: 5px; margin-left: 5px; padding-left: 8px; padding-right: 8px; border: 2px;"  role="tab"><i class="fa fa-code"></i><p>Application Version</p></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link text-center {% if wizard.steps.current == '10' %} active  {% endif %}" name='wizard_goto_step' value = '10' style="margin-top: 5px; margin-left: 5px; padding-left: 8px; padding-right: 8px; border: 2px;"  role="tab"><i class="fa fa-rocket"></i><p>Application Functionality</p></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link text-center {% if wizard.steps.current == '11' %} active  {% endif %}" name='wizard_goto_step' value = '11' style="margin-top: 5px; margin-left: 5px; padding-left: 8px; padding-right: 8px; border: 2px;"  role="tab"><i class="fa fa-rocket"></i><p>MISC</p></a>
                  </li>
              </ul>

              <div class="tab-content">
                <div class="tab-pane active" role="tabpanel">
                    <div class="card" id="steps_Card">
                        <div class="card-header">Step {{ wizard.steps.step1 }} of {{ wizard.steps.count }}</div>
                        <div class="card-body">
                              <div class="row">
                                  <div class="col">
                                      <div class="form-group">
                                        <table class="tbl-fix table-condensed">
                                          {{ wizard.management_form }}
                                          {% csrf_token %}
                                          {% if wizard.form.forms %}
                                              {{ wizard.form.management_form }}
                                              {% for form in wizard.form.forms %}
                                                  {{ form | crispy }}
                                                  {% include 'bootstrap4/layout/help_text_and_errors.html' %}
                                              {% endfor %}
                                          {% else %}
                                              {% if wizard.steps.current == '2' %}
                                                {{ wizard.form }}
                                              {% elif wizard.steps.current == '5' %}
                                                {{ wizard.form }}
                                              {% else %}
                                                {{ wizard.form | crispy }}
                                              {% endif %}
                                          {% endif %}
                                          </table>
                                          {% if wizard.steps.prev %}
                                          <button class="btn btn-primary bg-dark" name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}">{% trans "First step" %}</button>
                                          <button  class="btn btn-primary bg-dark" id="previousBtn" name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">{% trans "Prev step" %}</button>
                                          {% endif %}
                                          {% block savebtn %}
                                          <input type="submit" class='btn btn-primary pull-right bg-dark' onclick="formProcess()" name="wizard_goto_step" value="{% trans 'Save' %}" style="border-radius: 25px; width: 70px"/>
                                          {% endblock %}
                                      </div>
                                  </div>
                              </div>
                            </div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
          </form>
      </div>
    </div>


{% endblock body_block%}

所以我尝试在顶部使用此javascript,但无法正常工作。 我是新来的编码。请帮助我解决问题。谢谢

0 个答案:

没有答案