表单提交时的jQueryUI模式确认对话框 [英] jQueryUI Modal confirmation dialog on form submission

问题描述

我试图在用户提交表单时使模式确认对话框起作用.我从逻辑上认为，我的方法是赶上表单提交.我的代码如下，

I am trying to get a modal confirmation dialog working when a user submits a form. My approach, I thought logically, would be to catch the form submission. My code is as follows,

$('#multi-dialog-confirm').dialog({
    autoOpen: false,
    height: 200,
    modal: true,
    resizable: false,
    buttons: {
        'Confirm': function(){
            //$(this).dialog('close');
            return true;
        },
        'Cancel': function(){
            $(this).dialog('close');
            return false;
        }
    }
});

$('#completeform').submit(function(e){
    e.preventDefault();
    var n = $('#completeform input:checked').length;

    if(n == 0){
        alert("Please check the item and mark as complete");
        return false;
    }else{
        var q = $('#completeform #qty').html();
        if(q > 1){
            $('#multi-dialog-confirm').dialog('open');
        }
    }
    //return false;
});

所以我先设置我的对话框.这是因为我非常确定对话框的范围必须与调用它的函数处于同一级别.

So I'm setting up my dialog first. This is because I'm pretty certain that the scope of the dialog needs to be at the same level as the function which calls it.

但是，问题是，当您单击确认"时，没有任何反应.提交操作不会继续.我也尝试了$('#completeform').submit();，这似乎不起作用.我尝试删除.preventDefault()以确保表单提交没有被完全取消，但是这似乎与返回false没有区别.

However, the issue is that when you click 'Confirm' nothing happens. The submit action does not continue. I've tried $('#completeform').submit(); also, which doesn't seem to work. I have tried removing the .preventDefault() to ensure that the form submission isn't completely cancelled, but it doesn't seem to make a difference between that and returning false.

不选中该框，则显示并警告.可能会更改为对话框；)，单击取消"会关闭对话框并保留在页面上，但是难以捉摸的确认"按钮似乎不会继续进行表单提交事件.

Not checking the box, show and alert fine. Might change to dialog at some point ;), clicking 'Cancel' closes the dialog and remains on the page, but the elusive 'Confirm' buttons seems to not continue with the form submission event.

如果有人可以提供帮助，我很乐意与您分享我的午餐！ ;)

If anyone can help, I'd happily share my lunch with you! ;)

推荐答案

想通了，如果有人觉得有帮助，我应该在这里添加我的代码.

Figured I should include my code here, in case someone finds it helpfull.

    /*
 * Setup the confirm multiple completions dialog
 */
$('#multi-dialog-confirm').dialog({
    autoOpen: false,
    height: 200,
    modal: true,
    resizable: false,
    buttons: {
        'Confirm': function(){
            $(this).dialog('close');
            document.completeform.submit();
        },
        'Cancel': function(){
            $(this).dialog('close');
            return false;
        }
    }
});

/*
 * When completing an item on the search page, validate and confirm
 */
$('#completeform').submit(function(e){
    var n = $('#completeform input:checked').length;

    if(n == 0){
        alert("Please check the item and mark as complete");
        return false;
    }else{
        var q = $('#completeform #qty').html();
        if(q > 1){
            e.preventDefault();
            $('#multi-dialog-confirm').dialog('open');
        }else{
            return true;
        }
    }
    //return false;
});

这篇关于表单提交时的jQueryUI模式确认对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！