代码之家 › 专栏 › 技术社区 › Omu

jquery对话框:确认单击提交按钮

jquery

Omu · 技术社区 · 15 年前

我正在尝试使用jquery进行确认对话框,但表单根本没有提交,这是我得到的:

    <script type="text/javascript">
    var currentForm;
    $(function() {
        $("#dialog-confirm").dialog({
            resizable: false,
            height: 140,
            modal: true,
            autoOpen: false,
            buttons: {
                'Delete all items': function() {
                    currentForm.submit();
                    $(this).dialog('close');
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });
    });

    function ask() {
        currentForm = $(this).closest('form');
        $("#dialog-confirm").dialog('open');
    }
</script>
<form ... >
    <input type="submit" value="delete" onclick="ask();return false;" />
</form>

3 回复 | 直到 10 年前

Nick Craver 15 年前

您需要让对话框按钮提交 <form> ,像这样:

               'Delete all items': function() {
                  $(this).dialog('close');
                  $("#myForm").submit();
                }

其余的代码是正确的,但它当前只是关闭对话框并返回,您需要实际提交表单。此外,最好将其作为单击处理程序来执行,而不是 onclick ,像这样( 更新征求意见 ):

    var currentForm;
    $(function() {
        $("#dialog-confirm").dialog({
            resizable: false,
            height: 140,
            modal: true,
            autoOpen: false,
            buttons: {
                'Delete all items': function() {
                    $(this).dialog('close');
                    currentForm.submit();
                },
                'Cancel': function() {
                    $(this).dialog('close');
                }
            }
        });
        $(".delete").click(function() {
          currentForm = $(this).closest('form');
          $("#dialog-confirm").dialog('open');
          return false;
        });
    });

那就把你的 <input> 一类 delete ,像这样:

<input class="delete" type="submit" value="delete" />

Seb 15 年前

如果您正在使用jquery,那么请正确地执行它并避免使用内联javascript:

$(function (){
  $("form").submit(function (){
    // return false if you don't want this to be submitted
    // maybe do a
    // return ask();
    // but with the code provided it doesn't seem
    // to work like that - ask() is not returning anything at all!
  });
});

JoshYates1980 10 年前

这对我很有用:

 $(function () {
    $("#accordion").accordion({
        heightStyle: "content"
    });

    function confirmDialog(title, message, success) {
        var confirmdialog = $('<div></div>').appendTo('body')
            .html('<div><h6>' + message + '</h6></div>')
            .dialog({
                modal: true,
                title: title,
                zIndex: 10000,
                autoOpen: false,
                width: 'auto',
                resizable: false,
                buttons: {
                    Yes: function () {
                        success();
                        $(this).dialog("close");
                    },
                    No: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    $(this).remove();
                }
            });

        return confirmdialog.dialog("open");
    }

    $('form').on('submit', function (e) {
        e.preventDefault();
        var form = this;

        confirmDialog('Confirm', 'Are you sure?', function () {
            form.submit();
        });
    });
});

参考文献: http://jsfiddle.net/pmw57/67Ge2/