jQuery 即兴：甚至在点击是或否 ic 之前就提交了表单答案

【问题标题】：jQuery impromptu: Form getting submitted even before Yes or No ic clickedjQuery 即兴：甚至在点击是或否 ic 之前就提交了表单
【发布时间】：2010-07-02 06:07:49
【问题描述】：

我正在使用 jquery Impromptu 提交我的一个表单。在上述 URL 中，我使用的是示例 2。

现在，当我尝试在我的表单提交中加入相同的内容时，甚至在我点击是/否按钮之前，表单就被提交了。

我正在使用以下代码行提交表单

<input type="image" name="delete" src="images/delete.png" onclick="$.prompt('Are you sure??',{ buttons: { Ok: true, Cancel: false } })">

我确定我错过了一些东西。有人可以帮帮我吗？

谢谢，
阿洛伊

【问题讨论】：

标签： jquery forms jquery-plugins

【解决方案1】：

试试这样的：

<input type="image" name="delete" src="images/delete.png" onclick="$.prompt('Are you sure??',{ buttons: { Ok: $('form#foo').submit(), Cancel: false } }); return false;">

更好的是，尽量让你的 JS 不显眼：

<input type="image" name="delete" src="images/delete.png" />

$('input[name=delete]').click(function() {
    $.prompt('Are you sure??',{
        buttons: {
            Ok: $('form#foo').submit(),
            Cancel: false
        }
    });
    return false;
});

【讨论】：

Ok 属性将导致表单立即提交。需要将其包装在一个函数中。此外，jQuery 是否确保从图像按钮的 click 事件返回 false 会阻止表单提交？因为这不是可靠的跨浏览器行为。
@T.J.，你对函数包装的看法是对的，我对插件不熟悉，所以它从我身边溜走了。返回 false 将阻止表单在单击该按钮时提交，但不会阻止在 Enter 按下时提交。
@Tata：我认为实际上true 只是告诉插件显示Ok 按钮；回调是另一回事。（我也不知道插件，只是看文档。）

【解决方案2】：

即兴演奏不会在执行前等待。所以在用户确认操作之前不要提交。

这样使用：

<input type="image" name="delete" src="images/delete.png" onclick="confirmAndDelete()">

使用javascript函数：

function confirmAndDelete(){

    var deleteFunc = function()
    {
        $('form#foo').submit();
    };

    $.prompt("Are you sure?", 
             {
               title: "Delete Confirm",
               buttons: { "Yes": true, "No": false },
               submit: function (e, val, m, f) {                            
                            if (val == true)
                                deleteFunc();
                            else
                                console.log('Delete not confirmed!');
                        }
              });

}

【讨论】：

【解决方案3】：

像这样的花哨提示会在页面上/上方显示一条消息，但它们不会像alert 和confirm 那样暂停执行。（这就是the docs page 的意思，当他们说“这不是一个模态替换......”）所以虽然你显示了提示，但表单提交仍在继续。

处理此问题的常用方法是显示提示但取消表单提交，然后如果用户说“是”，则以编程方式提交表单。

基本上，你：

在表单上设置提交处理程序，以便在收到通知时取消提交
设置图片点击告知表单取消提交并改为显示提示
在提示的“是”按钮上设置处理程序以提交表单

【讨论】：