Почему request.POST не показывает значения, добавленные с помощью javascript после отрисовки формы django

Я пытаюсь обновить форму django в соответствии с нажатиями пользователя. Пользователю разрешено добавлять дополнительные теги формы в DOM, нажимая на кнопку, добавлять значение и отправлять, когда пользователь закончил.

Я использовал modelForm для создания начальной части формы, которая была отображена в шаблоне. Но когда форма отправляется, она показывает только значения, которые являются частью класса ReportForm, который наследует forms.ModelForm.

Вот мой класс отчетов: 

class ReportForm(forms.ModelForm):

date_resolved = forms.DateField(widget=forms.DateInput(attrs={
    'name': 'date_resolved',
    'type': 'date',
}), label="Date resolved (ignore if not):")

bias_score = forms.IntegerField(widget=forms.NumberInput(attrs={
    'type': 'range',
    'width': '100%',
    'value':0,
    'min': 0,
    'max': 10,
    'step': 1,
    'style': "padding: 0;"
}), label="Bias Score (between 0 and 10)")


class Meta:
    model = Reports
    fields = ['date_resolved', 'tags', 'bias_score']

и вот как выглядит класс отчета

class Reports(models.Model):

user = models.ForeignKey(User, on_delete=models.CASCADE)
conversation = models.ForeignKey(Conversations, on_delete=models.CASCADE)
tags = models.ManyToManyField(Tags, null=True, blank=True)
bias_score = IntegerRangeField(min_value=1, max_value=10)
resolved = models.BooleanField(default=False)
date_resolved = models.DateField(blank=True, null=True)
date_added = models.DateField(auto_now_add=True)

Скрипт javaScript немного длинный, но вот самая важная часть:

function create_tags(){
let label_text_content = null
if (IS_PROMPT == true){
    IS_PROMPT = false
    INPUT_COUNTER +=1
    label_text_content = 'Prompt:'
    
    prompt_response = `${label_text_content}_${INPUT_COUNTER}`
    // console.log("is prompt true", label_text_content, "prompt response", prompt_response);
    
}
else {
    label_text_content = 'Response:'
    IS_PROMPT = true
    prompt_response = `${label_text_content}_${INPUT_COUNTER}`
    // console.log("is prompt false", label_text_content, "prompt response", prompt_response);
}
let div_row = document.createElement('div')
div_row.classList.add('form_row', 'conv_row')

let div_label = document.createElement('div')
div_label.classList.add('tag_label')
let label_for = document.createElement('label')
label_for.id = prompt_response
label_for.textContent = label_text_content
div_label.appendChild(label_for)

let div_tag = document.createElement('form_tag')
div_tag.classList.add('form_tag')
let text_area = document.createElement('textarea')
text_area.id = `${prompt_response}`
div_tag.appendChild(text_area)



return [div_label, div_tag, div_row]

}

function create_message(){
let tags = create_tags()
div_label = tags[0]
div_tag = tags[1]
div_row = tags[2]
    
div_row.appendChild(div_label)
div_row.appendChild(div_tag)
conversations.appendChild(div_row)

}

Как включить новые теги, добавленные через javascript, в форму отчета и сделать так, чтобы они отображались в функции просмотра при выводе print(request.POST).

Я использовал скрытое поле для сбора пользовательских данных и смог увидеть это в request.POST. Спасибо viaTech за помощь.

Вот код, который я использовал для решения проблемы. У меня есть скрытая текстовая область в форме, и когда пользователь отправляет форму, я обрабатываю значения запроса/ответа и использую их для замены значения текстовой области.

submit_report_form.addEventListener('click', (e)=> {
e.preventDefault()
let id_conv_holder = document.querySelector('#id_conv_holder')
let conversations = document.querySelector('#conversations').childNodes
let conversations_arr = [...conversations].slice(1,)
let total_in_prompts = document.querySelectorAll('.input_prompts')
/**
 * @todo total_in_prompts to check if the user has provided 
 * prompt without response or vice versa
 * this can be infered if the total_in_prompts is not even
 * i.e not divisble by 2.
 */
// console.log("total_in_prompts", total_in_prompts.length);
let cur_val_load = {}
for (let i=0; i<conversations_arr.length; i++){
    let cur_label_node = conversations_arr[i].childNodes[0].childNodes[0].id.toLowerCase()
    let cur_tag_node = conversations_arr[i].childNodes[1].childNodes[0].value.toLowerCase()
    let cur_tag_node_id = conversations_arr[i].childNodes[1].childNodes[0].id.toLowerCase()
    cur_val_load[`${cur_tag_node_id}`] = cur_tag_node
   
}

id_conv_holder.value = JSON.stringify(cur_val_load)

report_form.submit()

})

Вернуться на верх