ドロップダウンボタンでajaxを呼び出します

Question

フォームを作成し、ドロップダウンボックスにCategoryモデルの値を入力しました。その働き。 私はこのフォームを{{ language_form }}のようにテンプレートに表示しました。今度は、このドロップダウンでajaxを使用してonchangeイベントを実装します。ドロップダウン値の変更時に関数が呼び出します。

編集：これはDjangoフォームなしでこれを行うことができます。 <select onchange='ajaxfunction()'></select>しかし、私はdjango形式を使用しています。

class Language(forms.Form): 
    language = forms.ModelChoiceField(queryset=Category.objects.all(), widget=forms.Select(attrs={'onchange':'ajaxfunction()'})) 

それとも、手動でフォームをレンダリングすることができます：あなたはちょうどそのonchangeのattrを、追加したい場合は

フォーム

from django import forms 
from myapp.movie.models import Category 
class Language(forms.Form): 
    language = forms.ModelChoiceField(queryset=Category.objects.all()) 

は、ここに私のAjax機能

function showMovie(str) { 
     if (str == "") { 
      document.getElementById("txtHint").innerHTML = ""; 
      return; 
     } 
     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else {// code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
      } 
     } 
     xmlhttp.open("GET", "movie_list?q=" + str, true); 
     xmlhttp.send(); 
    } 

Answer 1

です。

Answer 2

このコードをフォームの最後に追加します。

... 
</form> 

    <script type="text/javascript"> 
     var ddl = document.getElementById('ddlYourDropDownListID'); 
     ddl.onchange = function() { 
      var str = 'someValue'; 
      showMovie(str); 
     }; 
    </script> 

</body> 
</html>