如何在表单的提交事件侦听器中放置回调以等待用户对jquery即兴提示的响应？

Question

这就是我想做的 -

• 当用户点击主窗体的提交按钮时显示提示（使用 jquery 的即兴）。提示仍然是一个包含密码字段和“确定”和“取消”按钮的表单。
• 当用户点击确定时，主表单（连同密码值，附加到主表单）发布。
• 如果用户单击“取消”，则不会提交表单。

详情
我之前问过一个问题-jquery form submit() not working inside callback function after preventing normal submit while using impromptu

并且能够使用javascript的本机提示方法成功实现我想要的。但我想用 jquery 的即兴插件做同样的事情。

这是使用原生 javascript 提示符的工作代码 -

$('#frmAddAdnetworkTemplate').submit(function(event){


            promptText = "Password required";

            postedPassword = prompt(promptText);

            if(postedPassword)
            {
                       $("form#frmAddAdnetworkTemplate").find("input#manage_adnetwork_password").val(postedPassword);
            }
            else
            {
                event.preventDefault();

            }
        });

这是我到目前为止使用即兴的代码 -

    $('#frmAddAdnetworkTemplate').submit(callBackSubmit);

    function callBackSubmit(event){

                $.prompt(passwordForm,{ buttons: { Ok: true, Cancel: function(){event.preventDefault(); } }, submit: submitPasswordPrompt});    

                //how do I call event.preventDefault(); when user cancel’s. 
    //The form gets submitted anayway, it does not wait for the code inside submitPasswordPrompt() to execute. How do I put some callback and make the submit event listener to wait until the user clicks Ok or Cancel?



            }

            function submitPasswordPrompt(e, value,m,form)
            {
                if(value)
                {

                     $("form#frmAddAdnetworkTemplate").find("input#manage_adnetwork_password").val(postedPassword);
    //append the password value in the main form 

                }
            }

但是表单无论如何都会被提交，我不知道如何设置某种回调来阻止提交，直到响应即兴提示。它不会像 javascript 的天真提示那样等待。

另外，请注意，我已经尝试在开头使用 event.preventDefault 并在我之前的问题jquery form submit() not working inside callback function after preventing normal submit while using impromptu 稍后使用 form.submit()。但在这种情况下，表单只是不提交（不显示 javascript 错误）。请看看你能不能回答这个问题。

Answer 1

我不知道这个插件，但我知道它是浏览器提示的 html 替代品。

我不会尝试重写您的代码，但可以查看可以更改流程逻辑的地方，以便您更轻松。

删除表单提交处理程序中的所有代码。

将一个点击处理程序绑定到表单提交按钮和按钮上的preventDefault，这样表单直到稍后你告诉它时才会提交。

在插件逻辑中，如果用户单击“确定”时一切正常，则调用$('#frmAddAdnetworkTemplate').submit()

如果不是“OK”，您需要自己处理需要使用插件方法完成的操作。

Answer 2

我认为您试图过早地阻止默认操作。使用您的代码单击取消 - 防止默认操作，然后提交到 submitPasswordPrompt。为什么不尝试发送 false 以取消，然后在提交函数中执行 preventDefault 逻辑，如下所示：

$(function(){
                $('#passwordForm').submit(function(){

                    $.prompt('blah blah',{ buttons: { Ok: true, Cancel:false }, submit: submitPasswordPrompt});    

                    console.log('submitted');
                    return false; // Prevent submit
                });
            });

            function submitPasswordPrompt(e, value,m,form)
            {
                if(value)
                {
                     console.log('submittin....');
                } else {
                    console.log('its false');
                    e.preventDefault();
                }
            }

Answer 3

首先要注意的是，您已将submit button 命名为“提交”。这对应于form.submit，使您无法提交form。

在定义脚本 HTML 表单时最常见的错误 将与从快捷方式的存在下进行交互 表单控件的访问器。它是给控件一个名称（或 可能是 ID) 对应于 FORM 的现有属性 元素。最常见的例子是 INPUT 元素 type="submit" 名称为“submit”。因为命名控件是 作为此 INPUT 的 FORM 元素的命名属性提供 元素在属性名称“提交”下可用。 不幸的是 FORM 元素已经有一个名为的属性 “submit”，就是可以用来提交表单的submit方法 用脚本。

来源：https://stackoverflow.com/a/3553600/896341

您甚至错误地使用了插件Impromptu，并且不应将匿名函数作为按钮值传递。 另请注意，submit event handler 函数在 $.prompt() 的 submit callback 函数之前完成。

此example 演示了执行流程以及如何阻止form 提交。

$('#myForm').on('submit', function(event) {

    var promptText = "The form will be submitted, continue?";

    console.log('Blocking attempt to submit form using preventDefault().'); // DEBUG
    event.preventDefault(); // Prevent default submit

    $.prompt(promptText, {
        buttons : { // Specify buttons and their return value
            Ok: true,
            Cancel: false
        },
        submit: function(event, value, message, formVals) {
            //console.log('submit', event, value, message, formVals); // DEBUG
            if (value) {
                console.log('Unbind submit event handler and trigger a submit.'); // DEBUG
                // Notice that you might want to rebind the event later on.
                $('#myForm').off('submit').submit(); // Submit form
            }
        }
    });

    console.log('This is executed before the submit callback of $.prompt().'); // DEBUG
});