Question

我创建了一个模型表单，但是在页面中，它只能显示表单，但是在点击＆＃34;提交＆＃34;之后无法输入数据而没有响应。按钮。我的观点或模板有什么问题吗？

打开页面时没有错误提示。

感谢您的帮助。

views.py

from django.http import JsonResponse

class ResultView(ListView):
    context_object_name = 'result_list'
    template_name = 'result_list.html'

     # /URL-to-ajax-view/
    def ajax_get_queryset(request):
        if self.request.method == 'POST' and request.is_ajax:

            form = InputForm(self.request.POST or None)
            if form.is_valid():
                company = form.cleaned_data['company']
                region = form.cleaned_data['region']

                queryset=Result.objects.filter(company=company,region=region)
                sales=Result.objects.queryset.aggregate(Sum('sales'))

            return render(request, 'dupont', {'sales': sales,'region':region,'queryset': queryset})
    else:
        form=InputForm()

result_list.html

<style type="text/css">

.basicinfo {
position: absolute;
width: 200px;
height: 115px;
left: 22px;
top: 0px;   
}

<body>
<div class="basicinfo">
<form id="InputForm" method="post" action="">   #here is the data entry form
        {% csrf_token %}

        <!--enter the company name--> 
        <div class="field">
            {{ form.company.errors }}
            <label id="id_company" name="company" for="{{ form.company.id_for_label }}">Company:</label>
            {{ form.company }}
        </div>

        <!--select region-->
        <div class="field" >
            <label> Select the Region:
            {{ form.region }}
                {% for region in form.region.choices %}
                     <option value="region" name= "region" id="id_region">{{region}} </option>
                {% endfor %}
            </label>
        </div>

        <!--submit-->
        <p><input type="submit" value="Submit" /></p></div>
    </form> 
    </div>
</div>

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("#InputForm").submit(function() { // catch the form's submit event
    var region= $("#id_region").val();
    var company= $("#id_company").val();

        $.ajax({ // create an AJAX call...
            data: $(this).serialize(), // get the form data
            type: $(this).attr('post'),
            url: "dupont_list/",
            success: function(data) { // on success..
                $("#result").html(data); // update the DIV "result"
            }
        });
        return false;
    });
});
</script>


    <div id="result" class="result">   <!--Showing the filtered result in database-->

    <table>
    <tr><b>Sales</b></tr>
    <td> {{sales.sales__sum}}</td>


    <tr><b>Employee</b></tr>
    <td> {{employee.employee__sum}}</td>
    </table>

Answer 1

我在您的代码中发现了一个小错误：

if self.request.method == 'POST' and request.is_ajax():

应该是

{{1}}

请注意（）

另外：将按钮从提交更改为按钮。

Answer 2

您的表单被html中的绝对定位元素所遮蔽。尝试将此添加到您的CSS：

form{ position:absolute;z-index:100 }

这会将你的表格提升到阴影之上。

django ModelForm：html中的表单无法输入数据并提交

2 个答案: