Как изменять форму при нажатии на кнопку, но оставаться на этой же странице?

Question

Хочу сделать так, чтобы при нажатии на кнопку изменялась форма и отправлялась(сохранялась(form.save())), но не было подзагрузки страницы и я оставался на этой же странице. Ну если так невозможно, то хотя бы прогружалась эта же страница.

Answer 1

Простой вариант без javascript

<form action="" method="post">
    {% csrt_token %}
    {{ form }}
    <button>Send</button>
</form>

Прошу обратить внимание на action он должен быть пустым или отсутствовать. Тогда отправка формы будет на тот же url.

В этом варианте обработчик формы должен располагаться на том url, в той же view.

Второй вариант, чуть по сложнее

<form action="{% url 'form_send_url' " method="post">
    {% csrt_token %}
    {{ form }}
    <button>Send</button>
</form>


def form_send_url_view(request, *args, **kwargs):
    ....
    # Работаете с формой
    if form.is_valid():
        form.save()
        redirect(request.META.get('REFERER')) # или reverse(<название урла с которого отправляли форму>)
    ...

В данном варианте, после отправки формы и возврате на страницу при нажатии F5 не будет отправляться еще один запрос. То есть не будет возможности вечно отправлять запросы комбинацией F5, Enter

Вариант с JS

<form ...>
  ...
</form>

$(document).ready(function() {
   let form = $('form');
   form.submit(function(e) {
       e.preventDefault();
       e.stopPropagation();
       
       let data = $(this).serialize(); // Данные формы

       $.ajax({
           method: 'post',
           data: data,
           url: $(this).attr('action'),
           success: function () {...}
       });
   })
});

В этом случае не важно где находится вью для обработки формы.

Код скрипта можно расположить как в шаблоне, так и в отдельном js файле (этот вариант лучше).

За более подробной информацией рекомендую обратиться к документации по JS

БЛОГ НА HUSL

Как изменять форму при нажатии на кнопку, но оставаться на этой же странице?

Ответы (1 шт):