【问题标题】：Checkbox enable text input复选框启用文本输入
【发布时间】：2019-05-23 06:11:23
【问题描述】：

我有两个过滤器（选择 1 和选择 2）。我可以同时选择一个或两个。一个过滤器在日期（datumObjave）上，另一个在名称上（naslov）。我的问题是这些过滤器目前处于固定值。

我不知道如何在启用复选框时显示文本框，我在其中输入将作为过滤器参数的文本。

页脚.html：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

</head>
<body>
    <form action="" method="POST">{% csrf_token %}
        {{ form.as_p }}
        <input type="submit" value="Apply" />
    </form>

        <script>
    $(document).ready(function(){
    var counter = 0;
    $('#choice_0').click(function() {
        if (!counter) {
            $('<input>').attr({
                id: 'foo',
                name: 'text'
            }).appendTo('form');
        }
        counter++;
    })
    var counter = 0;
    $('#choice_1').click(function() {
        if (!counter) {
            $('<input>').attr({
                id: 'foo',
                name: 'text'
            }).appendTo('form');
        }
        counter++;
    })
});
</script>

</body>
</html>

forms.py：

class ChoiceForm(forms.Form):
    filter = forms.MultipleChoiceField(choices=(('1', 'Choice 1'), ('2', 'Choice 2')), widget=forms.CheckboxSelectMultiple(attrs={'id': 'choice'}))
    name = forms.TextInput()
    year = forms.TextInput()

views.py：

def filtar(request):
    form = ChoiceForm(request.GET or None)
    data = Clanak.objects.all()    
    print(request.POST) # print QueryDict also
    if form.is_valid():
        print(form.cleaned_data) # This dict contains keys (filters, and html(This is dynamically added field))
        if '1' in form.cleaned_data['filter']:
            data = data.filter(naslov=form.cleaned_data['name'])
        if '2' in form.cleaned_data['filter']:
            data = data.filter(datumObjave__year=form.cleaned_data['year'])
    return render(request, 'filtar.html', {'data': data, 'form': form})

urls.py:

urlpatterns = [
    path('filtar/',views.filtar, name='filtar'),   
] + static(settings.MEDIA_URL, document_root= settings.MEDIA_ROOT)

截图：

-----------更新----------- --------：

我更新了我的代码，现在有两个问题：

1.) 我启用或禁用复选框它总是添加 2 个新文本字段

2.) 它不过滤任何东西，它总是显示所有数据

【问题讨论】：

你发出什么样的 HTTP 请求？ HTTP GET 还是 HTTP POST ？
@gachdavit 我正在使用 HTTP GET
当您选中选项 1/选项 2 时，您想显示文本框并填写它？
@gachdavit 是的，当我点击提交时，它应该使用来自该文本框的参数更改 views.py 中的数据（2019 和 NAME）并刷新（渲染）站点
values = form.cleaned_data['filter'] # 这会返回列表 name = values[0] data = Clanak.objects.filter(name=name) 然后渲染。

标签： django django-models django-forms django-templates django-views

【解决方案1】：

我会给你看一个小例子，，，

forms.py

from django import forms

class MyForm(forms.Form):
    filters = forms.MultipleChoiceField(
        choices=(('choice1', 'Choice 1'), ('choice2', 'Choice 2')), 
        widget=forms.CheckboxSelectMultiple(attrs={'id': 'choice'})
    )
    html = forms.TextInput()

filtar.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

</head>
<body>
    <form action="" method="POST">
        <!-- no {#% csrf_token %#} required if you send HTTP GET request -->
        {{ form.as_p }}
        <input type="submit" value="click" />
    </form>

    <script>
        // when you click now on checkbox, input will be generated inside your form. name: 'html' because I have html field(TextField) in my forms. This is for mapping 
        $(document).ready(function(){
        var counter = 0;
        $('#choice').click(function() {
            if (!counter) {
                $('<input>').attr({
                    id: 'foo',
                    name: 'text'
                }).appendTo('form');
            }
            counter++;
        })
    });
    </script>

</body>
</html>

views.py

def filtar(request):
    form = ChoiceForm(data=request.GET or None)
    data = Clanak.objects.all() 
    print(request.POST) # print QueryDict also
    if form.is_valid():
        print(form.cleaned_data) # This dict contains keys (filters, and html(This is dynamically added field))
        if 'choice1' in form.cleaned_data['filters']:
            data = data.filter(naslov=form.cleaned_data['html'])
        if 'choice2' in form.cleaned_data['filters']:
            data = data.filter(datumObjave__year=2019)
    return render(request, 'filtar.html', {'data': data, 'form': form})

分析代码。

【讨论】：

谢谢，请您查看我在原帖中的更新