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

Question

这就是我想做的 -

• 当用户单击主表单的提交按钮时显示提示(使用 jquery 的即兴提示)。提示仍然是一个表单，其中有一个密码字段以及一个“确定”和“取消”按钮。
• 当用户单击“确定”时，将发布主表单(以及附加到主表单的密码值)。
• 如果用户点击“取消”，则不会提交表单。

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

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

这是使用 native 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 的幼稚提示那样等待。

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

Answer 1

首先要注意的是，您已将提交按钮命名为“submit”。这与 form.submit 相对应，使您无法提交表单。

The most common mistake made when defining the form HTML that a script will interact with follows from the existence of the shortcut accessors for form controls. It is to give the control a NAME (or possibly ID) that corresponds with an existing property of FORM elements. And the most common example of that is an INPUT element of type="submit" with the NAME "submit". Because the named controls are made available as named properties of the FORM element this INPUT element is made available under the property name "submit". Unfortunately FORM elements already have a property with the name "submit", it is the submit method that can be used to submit the form with a script.

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

您甚至正在使用插件 Impromptu错误，不应将匿名函数作为按钮值传递。 另请注意，submit 事件处理程序 函数在 $.prompt() 的 submit 回调 函数之前完成。

这个example演示执行流程以及如何阻止表单提交。

$('#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
});