Отключение кнопок администрирования Django после нажатия

Есть ли простой способ в Django change forms отключить кнопки после отправки. Я хочу предотвратить отправку формы пользователем дважды в один и тот же момент!

Чтобы предотвратить многократную отправку формы в Django, вы можете отключить кнопку отправки после ее нажатия. Это распространенный подход, позволяющий избежать дублирования отправки формы. Вы можете добиться этого, используя комбинацию Django для обработки формы и JavaScript для управления состоянием кнопки.

🥇 Вот базовый пример, иллюстрирующий это:

💨Шаг 1: Создание формы Django

Сначала создайте форму Django в файле forms.py.

Например:👇

from django import forms

class MyForm(forms.Form):
    name = forms.CharField(max_length=100)
    email = forms.EmailField()
    message = forms.CharField(widget=forms.Textarea)

💨Шаг 2: Создайте представление для обработки отправки формы

В файле views.py вы будете обрабатывать отправку формы:👇

from django.shortcuts import render
from .forms import MyForm

def my_view(request):
    if request.method == 'POST':
        form = MyForm(request.POST)
        if form.is_valid():
            # Process the form data
            # Example: save it to the database
            # form.save()
            # Redirect or show a success message
            return render(request, 'success.html')
    else:
        form = MyForm()

    return render(request, 'form_template.html', {'form': form})

💨Шаг 3: Создание шаблона

В свой шаблон вы включите форму и добавите JavaScript, чтобы отключить кнопку после отправки.

Например, в файле form_template.html:👇

<!DOCTYPE html>
<html>
<head>
    <title>Form Example</title>
</head>
<body>
    <form method="post" id="my-form">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" id="submit-button">Submit</button>
    </form>

    <script>
        document.getElementById('my-form').onsubmit = function() {
            document.getElementById('submit-button').disabled = true;
        }
    </script>
</body>
</html>

🛠Пояснение:

⚡ Отправка формы: Форма отправляется методом POST.

⚡CSRF-токен: Убедитесь, что вы включили {% csrf_token %} для защиты от CSRF в Django.

⚡JavaScript: Код JavaScript прослушивает событие onsubmit формы. Когда форма отправлена, он отключает кнопку отправки, устанавливая ее атрибут disabled в true.

⚡Дополнительные соображения:

✔Error Handling: If there’s a validation error, you might want to handle re-enabling the button. However, in this simple example, the page reload will naturally reset the button state.

 ✔User Experience: Optionally, you can add styles to indicate to the user that the button is disabled, such as changing its appearance or using a loading spinner.

При таком подходе кнопка отключается сразу после нажатия, что предотвращает дублирование отправки формы.

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