创建退出确认弹出窗口

时间:2021-01-03 作者:JOKKER

我需要一些帮助。我正试图在WordPress上创建一个确认导航弹出窗口。我希望当用户尝试退出表单页面而不提交表单时,弹出窗口出现。

我正在谈论的弹出窗口截图:https://ibb.co/3CvqgKH

我用了Forminator 表单插件,用于在空白页中创建表单。表单由几个必填问题组成,因此只有在填写了所有必填字段后,用户才能提交表单。填写完所有必填字段后,表单接受提交并将用户重定向到其他URL(感谢页面)。

当用户进入此表单页面时,我希望每次用户尝试退出页面时都会出现一个确认导航弹出窗口。但是,如果用户通过提交表单退出页面,则不应显示弹出窗口。

我发现这篇文章:https://www.greengeeks.com/tutorials/article/incomplete-form-confirmation-in-wordpress/

我按照指南创建了一个自定义插件,它可以正常工作。

Here\'s what I did:

1. 在我的计算机上创建了一个名为confirm-leaving-form.

2. 添加了一个PHP文件,名为confirm-leaving.php, 内部confirm-leaving-form 文件夹:

<?php
/**
* Confirm Leaving
* Plugin Name: Confirm Leaving Form
* Plugin URI: http://www.mydomainexample.com
* Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form.
* Version: 1.0.0
* Author: My name
* Author URI: http://www.mydomainexample.com
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/

function wpb_confirm_leaving_js() {

wp_enqueue_script( \'Confirm Leaving Form\', plugins_url( \'js/confirm-leaving.js\', __FILE__ ), array(\'jquery\'), \'1.0.0\', true );
}
add_action(\'wp_enqueue_scripts\', \'wpb_confirm_leaving_js\');
3. 创建了另一个文件夹,名为js, 内部confirm-leaving-form 文件夹

4. 添加了一个JavaScript文件,名为confirm-leaving.js, 在新的js 文件夹:

jQuery(document).ready(function($) {

$(document).ready(function() {
needToConfirm = false;
window.onbeforeunload = askConfirm;
});

function askConfirm() {
if (needToConfirm) {
// Put your custom message here
return "Leaving so soon? Your data will be lost if you continue.";
}
}

$("#forminator-module-2959").change(function() {
needToConfirm = true;
});

})
forminator-module-2959 是我表单的ID。

5. 上传了整个confirm-leaving-form 文件夹到/插件/quot;我的网站目录(使用FileZilla FTP应用程序)。

6. 在WordPress上激活了新插件。

这就创建了一个自定义插件,它几乎可以满足我的需要,但还不够。

Here are the issues:

1. 只有当用户开始填写表单时,才会出现弹出窗口。如果表单为空,并且用户尝试退出页面,则不会出现弹出窗口。

2. 当用户填写表单并点击“提交”按钮时,弹出窗口出现。如果用户试图提交,则不应出现弹出窗口。

理想情况下,即使表单为空,也应显示弹出窗口,但如果用户通过单击;“提交”;按钮

这可能吗?

1 个回复
最合适的回答,由SO网友:Tony Djukic 整理而成

首先,更改函数的名称-它们与教程中的名称相同-作为一项规则,始终使它们具有唯一性,以减少冲突的可能性。因此wpb_confirm_leaving() 你应该把它改成jkkr_confirm_leaving. 只要确保你在任何地方都能改变它。但实际上,这只是我格外谨慎和迂腐。现在,为了解决您面临的问题。。。它们是javascript问题。。。

jQuery( document ).ready( function( $ ) {
    $( document ).ready( function() {
        /* You have it set as \'needToConfirm = false when the document loads. */
        //needToConfirm = false;
        /* Let\'s make it true instead. */
        needToConfirm = true;
        window.onbeforeunload = askConfirm;
    } );
    function askConfirm() {
        if( needToConfirm ) {
            /* Put your custom message here. */
            return \'Leaving so soon? Your data will be lost if you continue.\';
        }
    }
    /* Next, you actually have the above functions executing when you change the form,
       or more correctly being set to true, when you change the form.
       So instead, let\'s change the status of needToConfirm to FALSE if the user is 
       clicking submit, because you\'re already validating the form using 
       Forminator with required fields and all that, so, assuming they have 
       filled everything out correctly and they click submit, we want to just
       let them happily leave the page. 
       Quick note, if you can get the id="" of the submit button, 
       you can swap that out below instead of my ambigious guess. */
    $( \'#forminator-module-2959 input[type="submit"]\' ).on( \'click\', function() {
        needToConfirm = false;
    } );
} );
你也可以删除我的所有评论,但其基本要点如下。。。

加载带有表单的页面时,我们将立即设置needToConfirmTRUE.needToConfirm 是TRUE 一旦页面加载,我们就将其保持原样,直到有人单击input[type=submit] 对于这个特定的表单,此时,由于表单的验证现在由Forminator处理,我们将设置needToConfirmFALSE 因为不再需要,用户已经填写了表单,我们不想纠缠他们本教程的工作方式仅基于在用户费心实际与表单交互时设置要显示的消息。

UPDATE

有几件事,我现在才意识到document.ready 在另一个内部document.ready, 这是多余的。

您的第一个问题是因为脚本出现在每个页面上,所以它将在每个页面上执行,因为我们已经设置了needToConfirm 变量从一开始就是true。我已经纠正了这一点,在做任何其他事情之前,先检查表单是否存在。if( $( \'#forminator-module-2959\' ).length > 0 )

对于第二个问题,这实际上是浏览器所做的:

Note: 为了防止出现不必要的弹出窗口,某些浏览器不显示在beforeunload事件处理程序中创建的提示,除非已与页面交互。此外,有些根本不显示它们。

请在此处阅读规范:https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

第三期,在我最初的片段中,我写道:

快速提示,如果您可以获得id=“”"E;对于提交按钮,您可以在下面交换它,而不是我模棱两可的猜测。

我真的在猜测,结果是我瞄准了一个不存在的元素。现在这里的关键是,单击“提交”将禁用消息。但既然没有input[type="submit"] 消息从未被禁用。看看你的代码我发现$( \'#forminator-module-2959 #submit button\' ) 是目标的正确元素。因此,我在代码中已将其替换掉,现在单击它,应该可以在退出页面时禁用该消息。

jQuery( document ).ready( function( $ ) {
    /* First, lets restrict this to pages that actually have the form... */
    if( $( \'#forminator-module-2959\' ).length > 0 ) {   
            // Set the need to confirm to true
            var needToConfirm = true;
            window.onbeforeunload = askConfirm;
            function askConfirm() {
                if( needToConfirm ) {
                    /* Put your custom message here. */
                    return \'Leaving so soon? Your data will be lost if you continue.\';
                }
            }
            $( \'#forminator-module-2959 #submit button\' ).on( \'click\', function() {
                needToConfirm = false;
            } );
    }//endif
} );
这会让你更接近你的目标。

相关推荐

PHP是否可以将行号添加到FILE_GET_CONTENTS()

我有一个专用的自定义插件,我只在我的多个站点上使用,由于我做了很多调试,我发现包含wp配置更容易。管理区域中的php文件内容,以确保已正确启用/禁用调试。现在我正在培训其他设计师来帮助调试,所以我想包括类似于主题/插件编辑器的行号。我使用file_get_contents() 作用有没有办法将行号添加到此输出中?下面是获取wp config文件内容的函数:function eriWpConfig(){ $wp_config = FALSE; if ( is_readable