时间戳

首页 > 解决方案 > 复选框启用文本输入

django - 复选框启用文本输入

问题描述

我有两个过滤器（选择 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>

表格.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()

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

网址.py：

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

截屏：

图片

- - - - - - - - - - - -更新 - - - - - - - - - - - - - ----:

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

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

图片

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

标签： djangodjango-modelsdjango-formsdjango-templatesdjango-views

解决方案

我将向您展示一个小例子，，，

表格.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()

过滤器.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>

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

分析代码。

推荐阅读