Как сделать модальное диалоговое окно подтверждения перед отправкой формы?

Question

Я новичок в программировании web / javascript и задаюсь вопросом, может ли кто-нибудь дать мне простой пример диалога модального подтверждения непосредственно перед отправкой формы с несколькими кнопками отправки, используя предопределенную кнопку? Я наткнулся на jQuery и SimpleModal и думаю, что он подойдет для моего проекта ASP MVC.

Я попал в следующие нерабочие коды, я думаю, что моя первая проблема заключается в том, что вы не знаете, как вернуть значение из диалогового окна?

<script type="text/javascript">
    $(document).ready(function() {
    $("form").submit(function(ev) {
            return confirm("Confirm?");
        });
    });

    function confirm(message) {
        $("#confirm").modal({
            close: true,
            overlayId: "confirmModalOverlay",
            containerId: "confirmModalContainer",
            onShow: function modalShow(dialog) {
                dialog.overlay.fadeIn("slow", function() {
                    dialog.container.fadeIn("fast", function() {
                        dialog.data.hide().slideDown("slow");
                    });
                });

                dialog.data.find(".confirmMessage").append(message);
                dialog.data.find(".btnYes").click(function() {
                    $.modal.close();                                       
                });
            }
        })
    }        
</script>


<div id="confirm" style="display:none">
    <a href="#" title="Close" class="modalCloseX simplemodal-close">x</a>
    <div class="confirmHeader"><span>Confirm</span></div>
    <p class="confirmMessage"></p>
    <div class="buttons">
        <div class="btnYes">Yes</div><div class="btnNo simplemodal-close">No</div>
    </div>
</div>

Было бы неплохо, если бы кто-нибудь направил меня куда-нибудь онлайн для ускоренного курса веб-программирования:)

Answer 1

Лично я не удосужился сделать это таким образом.

Boxy - это плагин jQuery, который уже имеет элемент управления подтверждающим окном.

Пример для этого следующий:

$('#confirm-actuator').click(function() {
    Boxy.confirm("Please confirm:", function() { alert('Confirmed!'); }, {title: 'Message'});
    return false;
});

Если вы посмотрите на сам сайт Boxy, он также покажет вам, как получить отправленное значение и т. Д.

РЕДАКТИРОВАТЬ: Реализация для вас будет ....

 $(document).ready(function() {
    $("form").submit(function(ev) {
        $('#mySubmitBtn').click(function() {
            Boxy.confirm("Are you sure?", function() { /**DO ACTION FOR CONFIRM**/ }, {title: 'Confirm'});
            return false;
        });
    });

});

А затем поместите идентификатор на кнопку отправки mySubmitBtn.

Я не тестировал этот код от руки, но, надеюсь, это поможет.

Надеюсь, это поможет.

Хотя, по словам разработчика, этот метод не предназначен для замены встроенной функции window.confirm (), предоставляемой браузерами, поскольку она не имеет возможности блокировать выполнение программы, пока диалоговое окно является видимым.

Однако я не думаю, что это повлияет на отправку вашей формы, поэтому вам следует использовать этот метод.

Answer 2

Вот три способа достижения этой цели:

Модальное диалоговое окно подтверждения при отправке формы

Answer 3

Вам не нужно использовать jquery для простого модального диалога подтверждения при отправке формы. Браузер предоставляет несколько модальных системных диалогов. Один из них «подтвердить».

Этот простой javascript будет делать:

<form method="post" action="myurl.aspx" onsubmit="return confirm('Submit this form?')">
...
</form>

Для ускоренного курса вы можете проверить W3Schools или просто найти в Google учебники.