2

这是我想做的-

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

细节
我之前问过一个问题 - jquery form submit() not working inside callback function after prevent 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 prevent normal submit while using impromptu 之后尝试使用 form.submit() 。但在这种情况下，表单只是不提交（不显示 javascript 错误）。请看看你能不能回答这个问题。

4

3 回答 3

4

首先要注意的是你已经命名了你的submit button“提交”。这对应于form.submit并使您无法提交form.

定义脚本将与之交互的表单 HTML 时最常见的错误来自表单控件的快捷访问器的存在。它是为控件提供与 FORM 元素的现有属性相对应的名称（或可能的 ID）。最常见的示例是类型为“submit”且名称为“submit”的 INPUT 元素。因为命名控件作为 FORM 元素的命名属性可用，所以该 INPUT 元素在属性名称“submit”下可用。不幸的是，FORM 元素已经有一个名为“submit”的属性，它是可用于通过脚本提交表单的 submit 方法。

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

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

此示例演示了执行流程以及如何阻止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
});
于 2012-03-06T09:03:50.113 回答
0

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

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

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

将单击处理程序绑定到表单提交按钮和按钮上的 preventDefault 以便表单直到稍后您告诉它时才会提交。

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

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

于 2012-03-05T17:21:06.933 回答
0

我认为您正试图过早地阻止默认操作。使用您的代码单击取消 - 防止默认操作，然后提交到 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();
                }
            }
于 2012-03-05T17:22:10.077 回答