使用 Django，下拉菜单的选定选项不会传递给服务器

Question

我正在使用Django 和jQuery。

我的forms.py：

CARPET_TYPE = (
    ('', 'Select a carpet type'),
    ('NRM', 'Normal'),
    ('SLK', 'Silk'),
    ('WOL', 'Wool'),
    ('PER', 'Persian')
)


class CalculationForm(forms.Form):
    carpet_types = forms.ChoiceField(initial='', choices=CARPET_TYPE, label='Carpet Types',)

    length = forms.FloatField(min_value=0)

    width = forms.FloatField(min_value=0)

我的calculation_form.html（在我的index.html中用作block content）：

    <form action="{% url 'cleaners:pick_up' %}"  method="POST" id="main_form" class="probootstrap-form">
{% csrf_token %}
<div class="form-group">
<div class="row">
  <div class="col-md">
    <div class="probootstrap-size-wrap">
      <label for="{{ form.carpet_types.id_for_label }}">{{ form.carpet_types.label_tag }}</label>

      <!-- <label for="id_label_single" style="width: 100%;"> -->
        <select class="js-example-basic-single js-states form-control" id="id_label_single" name="dd-carpets"
                style="width: 100%;">
            {% for choice in form.carpet_types.field.choices %}
                <option value="{{choice.0}}" name="{{form.carpet_types.html_name}}">{{choice.1}}</option>
            {% endfor %}
        </select>
      <!-- </label> -->

     </div>
  </div>
</div>
  <!-- END carpet type row -->

<div class="row carpet-length">
  <div class="col-md meters-column">
    <div class="form-group" id="calc_main">
      <label for="{{ form.length.id_for_label }}">{{ form.length.label_tag }}</label>
      <div class="probootstrap-size-wrap">
        <input type="text" id="length" class="form-control" name="{{ form.length.html_name }}"
               placeholder="Enter the length of your carpet">
      </div>
    </div>
  </div>
</div>
<!-- END length row -->

<div class="row carpet-width">
  <div class="col-md meters-column">
    <div class="form-group" id="calc_main">
      <label for="{{ form.width.id_for_label }}">{{ form.width.label_tag }}</label>
      <div class="probootstrap-size-wrap">
        <input type="text" id="width" class="form-control" name="{{ form.width.html_name }}"
               placeholder="Enter the width of your carpet">
      </div>
    </div>
  </div>
</div>
<!-- END width row -->

<input type="hidden" id="service_cost" name="service_cost" value="">

<div class="row">
  <div class="col-sm-12 calculate">
    <input type="submit" id="calculate_btn" value="Calculate" class="btn btn-primary btn-block">
  </div>
</div>
</div>
</form> <!-- END form -->

最后是我的views.py：

def pick_up(request):
    # If this is a GET request create the calculation form
    if request.method == 'GET':
        calculation_form_pickup = CalculationForm()
    else:
        calculation_form_pickup = CalculationForm(request.POST)

        if calculation_form_pickup.is_valid():
            carpet_type = calculation_form_pickup.cleaned_data['dd-carpets']
            length = calculation_form_pickup.cleaned_data['length']
            width = calculation_form_pickup.cleaned_data['width']

现在，当我选择地毯类型并在表单中插入宽度和长度时，当执行 if calculation_form_pickup.is_valid() 时出现错误，需要 carpet_types 字段。检查POST 数据时，我可以看到carpet_types 字段未“清理”。就好像我没有在下拉菜单中选择任何东西一样。

我做错了什么？

编辑： 我忘了提到这个计算器是基于一个使用 select2 库的引导模板。

Answer 1

您已为您的选择指定名称属性“dd-carpets”而不是“carpet_types”。