Метод POST в Django не работает при использовании JavaScript

Я пытаюсь отобразить div при отправке формы. Он отображает div при отправке формы, в то время как форма не отправлена. Здесь используется метод POST. JavaScript используется для отображения div.

html файл:

                    <form method="POST" name="myFirstForm" id="chform">
                        {% csrf_token %}
                        <input type="hidden" name="details_id" value="{{details.id}}"/>
                        <input type="hidden" name="details_user_id" value="{{details.user_id}}"/>
                        <input type="hidden" name="user_id" value="{{user.id}}"/>
                        <input type="submit" class="btn btn-danger" id="chat" onclick="return myFunction()" value="Chat Now">
                    </form>
                   <div class="page-content page-container" id="page-content" style="display:none"></div>

JavaScript:

<script>
 document.forms['myFirstForm'].addEventListener('submit', function(event) {
// Do something with the form's data here
this.style['display'] = 'none';
event.preventDefault();
  });
   function myFunction() {
    var x = document.getElementById("page-content");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

</script>

views.py:

    if request.method=='POST':
        jid = request.POST.get('details_id')
        print(jid)
        cjid = request.POST.get('details_user_id')
        print(cjid)
        userid = request.POST.get('user_id')
        print(userid)

Если я не хочу отображать div и удаляю код JavaScript, метод POST работает. Может ли кто-нибудь предложить решение, чтобы решить эту проблему?

Если вы хотите отправить форму, то вам не следует вызывать event.preventDefault();. Это в основном говорит js перехватить событие submit и предотвратить поведение события по умолчанию, которое в вашем случае заключается в отправке формы.

Рассматривали ли вы возможность использования асинхронного JavaScript и XML (AJAX)? Мне кажется, что вам нужна функциональность асинхронного JS (или я неправильно понимаю).

Итак, в вашей кнопке submit вы должны вызвать функцию AJAX следующим образом:

<button type="submit" id="chat" data-url="{% url 'url_to_your_view_handling_the_post' %}" value="Chat Now"></button>

Тогда ваша onclick функция:

$(document).on('click', '#chat', function (e) {

    $.ajax({
        type: 'POST',
        url: $(this).data('url'),
        data: {
            // add any other HTML data attributes in this dictionary
            csrfmiddlewaretoken: getCookie('csrftoken'),
        },
        success: function (json_response) {
            // Successful AJAX response handling routine here
            // Display your div
            var x = document.getElementById("page-content");
            if (x.style.display === "none") {
                x.style.display = "block";
            }
            else {
                x.style.display = "none";
            }
        },
        error: function (xhr, errmsg, err) { }
    });
})

Итак, ваше представление по url url_to_your_view_handling_the_post, определенное в кнопке, будет обрабатывать метод POST и возвращать ответ JSON с любыми данными, которые вы хотите. Если ответ возвращается успешно, выполняется процедура success в вашей функции AJAX.

Отправка токена csrf не является чрезвычайно простой, и я отсылаю вас к этой теме для получения дополнительной информации о функции getCookie('csrftoken').

Примечание: Это реализация AJAX с помощью jquery, поэтому вам потребуется включить jquery в ваш шаблон.

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