如何在表单的提交事件侦听器中放置回调以等待用户对 jquery 即兴提示的响应? [英] How to put a callback in the submit event listener of a form to wait for user's response to jquery impromptu's prompt?

问题描述

这是我想要做的 -

• 当用户单击主表单的提交按钮时显示提示(使用 jquery 的即兴).提示再次是一个表单，其中包含一个密码字段以及一个确定和取消按钮.
• 当用户单击确定"时，将发布主表单(连同密码值，附加到主表单).
• 如果用户单击取消"，则不会提交表单.

详情
我之前问过一个问题 - jquery form submit() 在使用即兴使用时阻止正常提交后无法在回调函数内工作

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

and was able to successfully implement what I wanted using the native prompt method of javascript. But I want to do the same thing using jquery's impromptu plugin.

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

Here is the working code using native javascript prompt -

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


            promptText = "Password required";

            postedPassword = prompt(promptText);

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

            }
        });

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

And here is the code I though so far using impromptu -

    $('#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 的幼稚提示那样等待.

But the form gets submitted anyway and I am not sure how to put some kind of callback to prevent submission until responds to the impromptu prompt. It does not wait like in case of the naive prompt of javascript.

另外，请注意，我已经尝试在开始时使用 event.preventDefault，稍后在我之前的问题中使用 form.submit() jquery form submit() 在使用即兴使用时阻止正常提交后无法在回调函数内工作.但在这种情况下，表单不会提交(没有显示 javascript 错误).请看看你能不能回答这个问题.

Also, note that I have already tried using event.preventDefault in the beginning and form.submit() later in my earlier question jquery form submit() not working inside callback function after preventing normal submit while using impromptu. But in that case the form just does not submit (no javascript error displayed). Please see if you can answer that.

推荐答案

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

The first thing to notice is that you´ve named your submit button "submit". This corresponds with form.submit and making you unable to submit the form.

定义表单 HTML 时最常犯的错误将与以下快捷方式的存在交互表单控件的访问器.它是给控件一个 NAME(或可能是 ID)与 FORM 的现有属性相对应元素.最常见的例子是一个 INPUT 元素type="submit" 和 NAME "submit".因为命名控件是作为此 INPUT FORM 元素的命名属性可用元素在属性名称提交"下可用.不幸的是 FORM 元素已经有一个名为的属性submit"，是可以用来提交表单的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

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

You´re even using the plugin Impromptu wrong and should not pass anonymous functions as button values. Also notice that the submit event handler function completes before the submit callback function of $.prompt().

这个示例演示了执行流程以及如何防止表单从提交.

This example demonstrates the execution flow and how you can prevent the form from submitting.

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

这篇关于如何在表单的提交事件侦听器中放置回调以等待用户对 jquery 即兴提示的响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！