0

私はdjango、python、ajaxが初めてです。4つのフィールドを持つdjangoフォームがあります。4 つのフィールドのうち、1 つのフィールドのデータは前のフィールドの選択に基づいています。これを達成するために ajax を使用しました。私の ajax 応答は問題ありません。HTMLページに入力されていますが、フォームを送信すると、そのフィールドは表示されません。これが私のforms.pyです

class UserForm(forms.Form):   
    def __init__(self, *args, **kwargs):
        super(UserForm,self).__init__(*args, **kwargs)
        self.fields['FunctionType'] = forms.ChoiceField(label='FunctionType',choices=function_choices(), widget=Select(attrs={'onChange':'get_function_type()'}),required=False)
        self.fields['SubFunctionType'] = forms.ChoiceField(label='SubFunctionType',choices=subfunction_choices(),widget=Select,required=False)
        self.fields['FromDate'] = forms.CharField(label='FromDate',max_length=30,required=False)
        self.fields['ToDate'] = forms.CharField(label='ToDate',max_length=30,required=False)

function_choices() と subfunction_choices() は、データベースから選択肢を取得する関数です。サブ機能タイプは、特定の機能タイプの選択時に変更する必要があります。これが「onchange」と呼ばれる私のJavaScript関数です。

function get_function_type() {
    var functionVal = document.getElementById("id_FunctionType").value;
    if (functionVal == "---- Select a Function Type ----")
    { 
    alert ("Please select a valid function");
    }
    else
    {
    new Ajax.Request('/test/select_subfunction', { 
    method: 'get',
    parameters: $H({'FunctionType': FunctionVal}),
    onSuccess : function(transport) { 
     var e = $('id_SubFunctionType')
      if(transport.responseText)
            e.update(transport.responseText)
    }
    }); // end new Ajax.Request
   }
}

/test/select_subfunction に対応するビューは、

def select_subfunction(request):
    if request.is_ajax() and request.method == 'GET':
        func_type = request.GET.get('FunctionType','')
        SubFunctionType = { (values fetched from database) }
    return render_to_response('Input.html', {'SubFunctionType':SubFunctionType},context_instance=RequestContext(request))

以下のように、単一の HTML テンプレートが使用されます。

  <form id="UserForm" enctype="multipart/form-data" method="post" action=""> {% csrf_token %} 
  <table align="center">

  <tr>
      <td > Function Type * {{ form.FunctionType }} </td> </tr>
   <td > SubFunction Type * {{ form.SubFunctionType }} </td> </tr> 

     {% for c in SubFunctionType %}   
       <option value="{{ c.SubFunctionType }}">{{ c }}</option> 
     {% endfor %}      
      <td > From (YYYY-MM-DD) <br> {{ form.FromDate }} </td> </tr>
      <td > To (YYYY-MM-DD) <br> {{ form.ToDate }} </td> </tr>
  </form>
</table>
   <input type="submit" value="Submit" />

Subfunction の値は Function の選択に基づいて入力されますが、ビューでは空白です。request.POST の出力は次のとおりです。

POST:<QueryDict: {u'FunctionType': [u'Laptop'], u'ToDate': [u''], u'csrfmiddlewaretoken': [u'Z8JjC04imL3Tkn0XYPFL2EZ5znzvssar'], u'SubFunctionType': [u''], u'FromDate': [u'']}>,

機能タイプのノートパソコンの場合、ノートパソコンの全メーカーを表示します。HPを選びました。したがって、サブ機能には HP が含まれている必要があります。

4

1 に答える 1