Django Загрузка bootstrap-модала только после прохождения валидации формы

Пытаюсь вывести модальное окно с условиями и положениями, только когда пользователь принимает условия и положения, данные отправляются в базу данных. Я хочу подтвердить ввод пользователя до появления модального окна. Ниже приведен мой код.

individual_account.html

views.py

def individual_account(request):
    if request.method == 'POST':
        form = IndividualForm(request.POST)
        if form.is_valid():
            form.save()
            fullname = form.cleaned_data['full_name']
            messages.success(
                request,
                f'Thank You {fullname} For Creating An Account.'
            )
            return HttpResponseRedirect(
                reverse_lazy('accounts:individual-account')
            )
    else:
        form = IndividualForm()
    return render(request, 'accounts/individual_account.html', {'form': form})

Как я могу этого добиться?

Если я правильно понял, вы просто хотите сделать запрос на пост, когда пользователь принимает всплывающий модал, вы можете использовать эту кнопку внутри вашего модала, чтобы отправить запрос на пост с помощью javascript:

<button type="button" class="btn btn-primary">Save changes</button>
Поскольку это пост-запрос, вам необходимо указать ваш csrf_token. Обходной путь выглядит следующим образом:

let csrfToken = "{{csrf_token}}"
async function postRequest() {
  let form = document.getElementById("individualForm")
  let postUrl = form.action;
  let data = new FormData(form)

  // include your csrf token for post request in the request header
  let headers = new Headers({
    "X-CSRFToken": csrfToken,
  });
  let postResponse = await fetch(postUrl, {
    method: "POST",
    headers: headers,
    body: data,
    redirect: "follow",
  });
}

и, конечно, вам нужно событие onclick для упомянутой кнопки:

<button type="button" class="btn btn-primary" onclick="postRequest()">Save changes</button>
Я не тестировал код, но это общее руководство по тому, как вы можете достичь своих целей, чтобы промежуточное всплывающее окно появлялось перед отправкой запроса.

Примечание: Вам не нужно использовать fetch api для выполнения запроса сообщения есть несколько способов сделать это в javascript я наиболее знаком с fetch так что примите это с крупицей соли я надеюсь, что это помогло.

Мне удалось решить эту проблему.

<form method="post" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" id="individualForm">
    {% csrf_token %} 
    {% for hidden_field in form.hidden_fields %}
        {{ hidden_field.errors }} 
        {{ hidden_field }} 
    {% endfor %}
    <!-- Your form fields here -->

    <!-- Button to trigger modal -->
    <button type="submit" id="createAccountBtn" class="bg-yellow-700 text-white rounded-none hover:bg-white hover:text-blue-900 hover:border-blue-900 shadow hover:shadow-lg py-2 px-4 border border-gray-900 hover:border-transparent">
        Create Account
    </button>
</form>

<!-- Modal -->
<div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Terms & Conditions</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Terms & Conditions Here!!</p>
                <label><input type="checkbox" id="acceptTerms"> I accept the terms and conditions</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" id="acceptTermsBtn" class="btn btn-primary">Accept and Create Account</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        // Handle form submission
        $('#individualForm').submit(function (event) {
            event.preventDefault(); // Prevent default form submission
            $('#termsModal').modal('show'); // Show terms modal
        });

        // Handle accept terms button click
        $('#acceptTermsBtn').click(function () {
            if ($('#acceptTerms').prop('checked')) {
                $('#individualForm').unbind('submit').submit(); // If terms accepted, submit form
            } else {
                // If terms not accepted, show an alert or perform any other action
                alert('Please accept the terms and conditions.');
            }
        });
    });
</script>
Вернуться на верх