2015-10-22 72 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上顯示基於用戶輸入的過濾結果。 –

相關問題