Исправить: кнопка сохранения заказа не работала (вложенная форма)

ПРОБЛЕМА:
После предыдущего коммита кнопка сохранения заказа перестала работать.
Клик на кнопку не приводил к отправке формы - ноль реакции.

ПРИЧИНА:
Вложенная форма удаления платежа внутри основной формы order-form.
Вложенные формы недопустимы в HTML и браузер неправильно обрабатывает
submit-события.

РЕШЕНИЕ:
Заменил вложенную форму на JavaScript обработчик:
- Кнопка удаления теперь type=button (не submit)
- Добавлены data-атрибуты: payment-id, payment-name, payment-amount
- JavaScript создает временную форму для POST-запроса с delete_payment_id
- Форма отправляется программно через form.submit()

ИЗМЕНЕНИЯ:
- Заменена форма на button для удаления платежей
- Добавлен JavaScript обработчик .delete-existing-payment-btn
- Подтверждение удаления с именем и суммой платежа

РЕЗУЛЬТАТ:
 Кнопка сохранения заказа работает
 Удаление существующих платежей работает
 Нет вложенных форм (валидный HTML)
This commit is contained in:
2025-11-29 02:18:05 +03:00
parent f9e086fd89
commit ee002d5fed

View File

@@ -628,13 +628,13 @@
<span class="text-muted">{{ payment.notes|default:"—" }}</span> <span class="text-muted">{{ payment.notes|default:"—" }}</span>
</div> </div>
<div class="col-md-1 text-end"> <div class="col-md-1 text-end">
<form method="post" style="display: inline;" onsubmit="return confirm('Удалить этот платеж?');"> <button type="button" class="btn btn-outline-danger btn-sm delete-existing-payment-btn"
{% csrf_token %} data-payment-id="{{ payment.id }}"
<input type="hidden" name="delete_payment_id" value="{{ payment.id }}"> data-payment-name="{{ payment.payment_method.name }}"
<button type="submit" class="btn btn-outline-danger btn-sm" title="Удалить платеж"> data-payment-amount="{{ payment.amount|floatformat:2 }}"
title="Удалить платеж">
<i class="bi bi-trash"></i> <i class="bi bi-trash"></i>
</button> </button>
</form>
</div> </div>
</div> </div>
</div> </div>
@@ -845,6 +845,46 @@
} }
}); });
})(); })();
</script>
<script>
// Обработчик удаления существующих платежей
document.addEventListener('DOMContentLoaded', function() {
const deleteButtons = document.querySelectorAll('.delete-existing-payment-btn');
deleteButtons.forEach(button => {
button.addEventListener('click', function() {
const paymentId = this.dataset.paymentId;
const paymentName = this.dataset.paymentName;
const paymentAmount = this.dataset.paymentAmount;
if (!confirm(`Удалить платеж "${paymentName}" на сумму ${paymentAmount} руб.?`)) {
return;
}
// Создаем скрытую форму для отправки
const form = document.createElement('form');
form.method = 'POST';
form.action = window.location.href;
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
const csrfInput = document.createElement('input');
csrfInput.type = 'hidden';
csrfInput.name = 'csrfmiddlewaretoken';
csrfInput.value = csrfToken;
form.appendChild(csrfInput);
const paymentIdInput = document.createElement('input');
paymentIdInput.type = 'hidden';
paymentIdInput.name = 'delete_payment_id';
paymentIdInput.value = paymentId;
form.appendChild(paymentIdInput);
document.body.appendChild(form);
form.submit();
});
});
});
</script> </script>
<div class="card mb-3"> <div class="card mb-3">