Meu projeto possui um formulário que um dos campos é lista de objetos(Cursos), porém esses objetos estão sendo passados de outra lista(Cursos da área) por meio de JavaScript, só que os valores alocados com JS para a lista principal(Cursos) não passam da fase de validação do ModelForm. Segue o código:
class EntidadeForm(forms.ModelForm):
area = forms.ModelChoiceField(
label='Área',
queryset=Area.objects.all(),
required=False,
empty_label='Selecione uma Área',
widget=forms.Select(attrs=
{'onchange': "filtraCursosCad();"}
)
)
cursos_da_area = forms.ModelMultipleChoiceField(
label='Cursos da Área',
queryset=Curso.objects.none(),
required=False,
widget=forms.SelectMultiple(attrs=
{'onclick': "adicionaCurso();"}
)
)
class Meta():
model=Entidade
fields=['area','cursos_da_area',
'cursos',Outros atributos da entidade...]
def __init__(self,*args, **kwargs):
super(VagaForm, self).__init__(*args, **kwargs)
self.fields['cursos'].queryset = Curso.objects.none()
Código JS:
//Código que filtra a lista 'mãe'
function filtraCursosCad(){
area_id=document.getElementById('id_area').value;
$.ajax({
url: '/entidade/ajax/carrega_cursos/',
data: {
'area': area_id,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (data) {
$("#id_cursos_da_area").html(data);
}
});
}
//Código que adiciona o curso
function adicionaCurso(){
$("#id_cursos").append( $("#id_cursos_da_area option:selected"));
}
Código usado na view:
class EntidadeCriar(CreateView):
model=Entidade
form_class =EntidadeForm
def form_valid(self,form):
entidade=form.save(commit=False)
entidade.empresa=self.request.user.empresa
entidade.save()
return redirect('entidade_empresa')
Solução
Seguindo o que o @Eric Chiesse disse troquei o código do preenchimento do campo cursos que agora está assim:
self.fields['cursos'].queryset = Curso.objects.all()
Além disso também me baseando na resposta dele fui montar um código JS para "limpar" o campo no momento em que a página é carregada, então encontrei o evento onload e então tentei vinculá-lo ao componente Select do Html porém não tive sucesso e pesquisando descobri que esse evento não está disponível para todas as tags html(aqui), então fiz uma chamado do onload no body que ficou assim:
<body onload="zeraCursos()">
e o código JS ficou assim:
function zeraCursos(){
var cursos=document.getElementById("id_cursos");
for(var i = cursos.options.length - 1 ; i >= 0 ; i--){
cursos.remove(i);
}
}
request.POST
)?