Django Forbidden (CSRF token missing.) - html

Question

I am facing a problem to submit a text in Django. When I click Insert, the message Forbidden (CSRF token missing.): appears. Can somebody help me?
Normally the csrf token is supposed to work.
I put the CSRF token in the html file, but still no working. I do not know if the csrf is in the wrong part of the code or not.
> <form method="POST" enctype="multipart/form-data">
> {% csrf_token %}
> <div class="modal-dialog modal-md">
> </form>
> <div class="modal-content" hx-target="this" hx-swap="outerHTML" id="this">
> {% load crispy_forms_tags %}
>
> <!-- Modal Header -->
> <div class="modal-header">
> <h4 class="modal-title">Show gabarit</h4>
> <button type="button" class="close" data dismiss="modal">×</button>
> </div>
>
> <!-- Modal body -->
> <div class="modal-body">
> <pre style="font-size: 12px"><textarea id='input-text' name='input-text' style='height:100px; width: 800px;'>{{commande}}</textarea></pre>
>
> if formset %}
> <button class="mb-2 btn btn-outline-secondary mr-2"
> id="variables-button" type="button" onclick="openModal()">Variables</button>
> endif %}
>
>
> <div id="modal" style="display:none;">
> <div id="variables-container"></div>
> <button class="mb-2 btn btn-outline-secondary mr-2"
> id="insert-button" type="button" onclick="closeModal()">Insérer</button>
> </div>
> </form>
>
> <div id='result'></div>
>
> </div>
>
>
> </div>
>
> </div>
>
>
> <script>
> function openModal() {
> var inputText = document.getElementById("input-text").value;
> var variableNames = inputText.match(/{(.*?)}/g);
> var variablesContainer = document.getElementById("variables-container");
> variablesContainer.innerHTML = "";
> for (var i = 0; i < variableNames.length; i++) {
> var variableName = variableNames[i].slice(1, -1);
> variablesContainer.innerHTML += "<div><label for='variable-" + variableName + "'>" + variableName + ":</label><input type='text' id='variable-" + variableName + "' name='variable-" + variableName + "'></div>";
> }
> document.getElementById("modal").style.display = "block";
> }
>
> function closeModal() {
> var inputText = document.getElementById("input-text").value;
> var variableNames = inputText.match(/{(.*?)}/g);
> for (var i = 0; i < variableNames.length; i++) {
> var variableName = variableNames[i].slice(1, -1);
> var variableValue = document.getElementById("variable-"+ variableName).value;
> inputText = inputText.replace(variableNames[i], variableValue);
> }
> document.getElementById("input-text").value = inputText;
> document.getElementById("modal").style.display = "none";
> document.getElementById("variables-button").style.display = "none";
>
> var xhr = new XMLHttpRequest();
> xhr.open("POST", "{% url 'gabarits:save-variables-text' %}", true);
> xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
> xhr.onreadystatechange = function() {
> if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
> console.log("Input text saved successfully.");
> }
>
> };
> xhr.send("text=" + inputText);
> }
> </script>
On the view side:
def save_variables_text(request):
if request.method == 'POST':
text = request.POST.get('text')
InputText.objects.create(text=text)
return render(request, 'previsualise.html')