私は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 が含まれている必要があります。