Как по нажатию кнопки добавлять текст в форму?

У меня задача: реализовать кнопку 'добавить код'(как на этом сайте), нажимаешь на кнопку и в форму добавляется тег <code></code>

Реализовать на HTML + Js не составило труда, вот

    <input type = "text" name = "text" id="text" value = "" />

<input type="submit" onclick="document.getElementById('text').value+='<code></code>'; return false;"
 value = "Добавить код" />

Но я не могу реализовать тоже самое на django

forms.py

    class AnswerForm(forms.ModelForm):
    class Meta:
        model = Answer
        fields = ['text']

class QuestionForm(forms.ModelForm):
    class Meta:
        model = Questions
        fields =['q_name','slug', 'q_cat' ,'q_text']

Шаблон(его часть)

<!--    форма для добавления вопроса(поста) на страницу-->
<form action="" method="post">
{% for f in q_form %}

    <p><label class="form-label" >{{f.label}}: </label> {{ f }}</p>    

<div class="form-error">{{ f.errors }}</div>

{% endfor %}
    {% csrf_token %}
    <p><input type="submit" value="Задать вопрос"></p>

</form>
    {% else%}
    <h1>Зайдите на сайт</h1>
    {% endif %}

В целом - ничего не меняется, это также реализуется через HTML + JS.

Единственное различие, что теперь поле text находится внутри формы, которую генерирует Django, и все сводится к нахождению этого HTML-элемента через JS.

Приведу одно из возможных решений:

Вы можете в классе формы дополнительно переопределить метод __init__ и в нём конкретному полю модели назначить нужный вам HTML-id, выглядит это так:

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.fields['text'].widget.attrs.update({'id': 'some_id'})

После чего, по аналогии с вашим примером, находить это поле по id, которое вы ему назначите, и работать с HTML-кодом этого элемента через атрибут innerHtml, примерно так: document.getElementById('some_id').innerHTML += html_to_insert;

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