Django not validating values changed with JS

I’ve been trying to simulate some sort of picklist on Django forms, where there’s 3 SelectMultiple involved, all begin in Area field, when Area is changed the field Course_Area is reloaded with the Courses related of the Area selected(this part is already working) and finally the field Course where the problem happens, the Course field should be filled with the non repeated selected objects from Course_Area a task that from what i’ve searched is better performed with JS, with my actual JS code the selected items from Course_Area are being passed to the Courses field but when the form is submited the Course field dont pass on the validation phase. Any help would be welcome.(sorry for my bad english btw)

Form code:

class MyEntityForm(forms.ModelForm):
   area = forms.ModelChoiceField(
           {'onchange': "filterCourses();"}
   courses_area = forms.ModelMultipleChoiceField(
       label='Courses by Area',
           {'onclick': "addCourse();"}

   class Meta():
       model = Entidade
       fields = ['area', 'courses_area',

JS code:

function filterCourses(){
       url: '/myentity/ajax/load_courses/',
           data: {
           'area': area_id,      
           csrfmiddlewaretoken: '{{ csrf_token }}'
           success: function (data) {   

function adicionaCurso(){
   $("#id_courses").append( $("#id_courses_area option:selected"));

Since the error appears at validation stage, probably it’s connected with csrf_token.
There is a part about Ajax.
To me this line looks weird, but I am not familiar with jQuery, so maybe it’s alright:

csrfmiddlewaretoken: '{{ csrf_token }}'