Event.preventDefault не работает в JS для отправки формы

// js

document.addEventListener("DOMContentLoaded", function () {
        const individualOrderForm = document.getElementById('individual-order-form');

        async function sendAjax(form) {
            try {
                const response = await fetch(form.action, {
                    method: 'POST',
                    body: new FormData(form)
                });

                const data = await response.json();

                if (data.status === "success") {
                    showToast(data.detail, "success");
                    disableForm(form);
                } else {
                    let errors = JSON.parse(data.errors);
                    let errorsText = Object.entries(errors)
                        .map(([field, errors]) => {
                            return errors.map(error => `${error.message}`).join('\n');
                        })
                        .join('\n');

                    showToast(`${data.detail}\n${errorsText}`, "danger");
                }
            } catch (error) {
                console.log(error);
                showToast(gettext("Произошла ошибка. Повторите попытку позже."), "danger");
            }
        }

        individualOrderForm.addEventListener(
            'submit',
            function (e) {
                e.preventDefault();
                sendAjax(individualOrderForm);
            },
            {passive: false}
        );
    }
);

<form id="individual-order-form"
      action="{% url 'mainpage:individual-order-negotiate' %}"
      method="POST"
      class="d-flex w-100 flex-column justify-content-start align-items-start text-start card-body">
  <fieldset class="w-100">
    <legend class="text-center">
      <h2 class="fs-4 fw-normal" id="contact-us">
        {% translate 'Свяжитесь с нами' %}
      </h2>
    </legend>
    <div class="form-text">{% translate 'Заполните форму, чтобы заказать букет из индивидуального состава.' %}</div>
    {% csrf_token %}
    <div class="mb-3 w-100">
      <label for="customerNameInput" class="form-label">{% translate 'Имя' %}</label>
      <input class="form-control text-start" id="customerNameInput" aria-describedby="nameHelp" name="first_name"
        required>
    </div>
    <div class="mb-3">
      <label for="contact-method-input" class="form-label">
        {% translate 'Тел. номер в любой соц. сети или ссылка профиля' %}
      </label>
      <div class="d-flex">
        {{ individual_order_form.contact_method }}
      </div>
    </div>
    <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input checkbox-dark" id="recallCheckbox" name="recall_me">
      <label class="form-check-label" for="recallCheckbox">
        <small>
          {% translate 'Разрешаю мне перезвонить' %}
        </small>
      </label>
    </div>
    <button class="btn btn-dark-green">{% translate 'Связаться' %}</button>
  </fieldset>
</form>

К сожалению, на iOS (по крайней мере, на iOS) следующий код работает не так, как ожидалось:

individualOrderForm.addEventListener(
    'submit',
    function (e) {
        e.preventDefault();
        sendAjax(individualOrderForm);
    },
    { passive: false }
);

При отправке формы через POST-запрос страница перенаправляется на URL-адрес, по которому был отправлен POST-запрос, и я вижу возвращаемый JSON-объект, отображаемый на черном экране.

Однако он отлично работает как на ПК, так и на устройствах Android.

К сожалению, я не могу решить эту проблему.

Я наткнулся на это обсуждение, которое показалось мне логичным решением, но, к сожалению, оно не решило проблему:

Обсуждение на GitHub: React Issue #13369.

Я уже пробовал очищать кэш на стороне клиента и сервера, запускать manage.py collectstatic и перезапускать сервер, но проблема сохраняется.

Любая помощь или руководство были бы очень признательны.

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