2015-10-22 68 views
0

我创建了一个模型表单,但在页面中只能显示表单,但点击“提交”按钮后无法输入数据,也无法回复。我的视图或模板有什么问题吗?django ModelForm:html中的表单无法输入数据并提交

当我打开页面时,iis没有错误提示。

感谢您的帮助。

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> 
+0

更改输入类型提交到“按钮” –

回答

0

您的表单正被阴影中的一个绝对定位的元素在您的HTML。 尝试添加这对你的CSS:

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

这将解除你的表格上面无论是遮蔽它。

+0

优秀~~塞巴斯蒂安,它真的点击~~ –

1

我发现在你的代码的一个小错误:

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

应该

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

()

另外:更改按钮从提交按钮。

+0

嗨@ Vingtoft,非常感谢你,但我怀疑我的代码有更多的错误。我想嵌入Ajax表单插件:提交表单后,在同一个html上显示基于用户输入的过滤结果。 –

相关问题