Не удается отправить форму через Ajax

#ajax #forms #popup

#ajax #формы #всплывающее окно

Вопрос:

Редактировать

приведенный ниже код, похоже, работает до тех пор, пока форма действительна.

но когда это не так (метод очистки в форме django) текст формы h1 удаляется (????) и сообщения об ошибках не отображаются…

Я предполагаю, что пустой popup.html возврат осуществляется через ajax, и поскольку нет кнопки для взаимодействия, ничего не происходит, но почему текст h1 удаляется …???

    var prevent_edit = false;
    var prevent = false;

    // popup d'informations indiquant que la levée d'insue a déjà été faite 
    // pour ce patient
    $("#form_unblind_edit").submit(function (event) {
        console.log('form_unblind_edit click - first')
        console.log('prevent_edit - first', prevent_edit)
        if (!prevent_edit) {
            event.preventDefault();
        }
    });

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie amp;amp; document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i  ) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length   1) === (name   '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length   1));
                    break;
                }
            }
        }
        return cookieValue;
    }


    // affichage des informations sur le patient sélectionné pour la ré-allocation
    $("#unblind_edit").on("click", function (event) {
        console.log('click unblind edit');
        var csrftoken = getCookie('csrftoken');
        var patient = $("#id_pat").val();
        $.ajax({
            type: "POST",
            url: '/unblind/already_unblind/',
            data: {
                csrfmiddlewaretoken: csrftoken,
                'patient': patient,
            },
            dataType: 'html',
            success: function (data) {
                console.log('success');
                // var prevent_edit = false;
                $("#can_unblind").html(data);
                $('#unblindconfirm').modal('show');

                $('body').on('click', '#edit_button_OK', function (event) {
                    console.log('edit_button_OK')
                    $('#edit_button_OK').attr("disabled", "disabled");
                    prevent_edit = true;
                    console.log('prevent_edit', prevent_edit);
                    $("#form_unblind_edit").submit();
                })
            },
            error: function (resultat, statut, erreur) {
                console.log('error');
            }
        });

    });
 

мне нужна помощь для всплывающего окна с ajax

Пользователь заполняет форму и отправляет форму, нажав кнопку

Я запрещаю отправлять с event.preventDefault(); помощью для отображения всплывающего окна.

Но мне нужно запросить у базы данных информацию для отображения во всплывающем окне, поэтому я использую ajax-запрос

при успешном выполнении ajax отображается всплывающее окно с информацией из базы данных, и я хочу, чтобы форма была отправлена, нажав на кнопку «ОК» всплывающего окна

но, я думаю, это не удалось, потому что событие (отправка) привязано к кнопке, которой нет в DOM при загрузке страницы…

JS

 $(document).ready(function () {

    var prevent_edit = false;

    // prevent submission
    $("#form_unblind_edit").submit(function (event) {
        if (!prevent_edit) {
            event.preventDefault();
        }
    });
    // ajax query that display popup
    $("#unblind_edit").on("click", function (event) {
        var csrftoken = getCookie('csrftoken');
        var patient = $("#id_pat").val();
        $.ajax({
            type: "POST",
            url: '/unblind/already_unblind/',
            data: {
                csrfmiddlewaretoken: csrftoken,
                'patient': patient,
            },
            dataType: 'html',
            success: function (data) {
                $("#can_unblind").html(data); //popup html attach to DOM
                $('#unblindconfirm').modal('show');  //popup displayed
                $('body').on('click', '#edit_button_OK', function (event) {
                    console.log('edit_button_OK'); // WORKING
                    prevent_edit = true;
                    $("#form_unblind_edit").trigger('submit');  //form submission = NOT WORKING
                })
            }

        });
});
 

Комментарии:

1. Вы пробовали использовать .submit() вместо .trigger('submit') ?

2. да, но делает то же самое

3. вы пробовали консоль. войдите в функцию отправки, чтобы проверить, вызывается ли она? Также вы можете зарегистрировать prevent_edit внутри и убедиться, что для него установлено значение true

Ответ №1:

Возможно, измените тип кнопки отправки в форме на «кнопка»

 <button type="button">Submit</button>
 

Таким образом, действие отправки не выполняется, когда пользователь нажимает кнопку отправить, и вместо этого вы показываете всплывающее окно. Затем вы должны иметь возможность отправить форму с помощью jQuery.

  $("#form_unblind_edit").trigger('submit');
 

Комментарии:

1. спасибо за ответ, но это не решило проблему