首頁>Web>source

我需要一些帮助.我正在尝試在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. 添加了一个名為 confirm-leaving.php的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. 添加了一个名為 confirm-leaving.js的JavaScript檔案 ,在新的 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 檔案夹到我網站的" / plugins /"目錄(用於Filezilla FTP應用程式)。

6. 在wordPress上啟用了新插件。

這建立了一个自定義插件,几乎可以實現我想要的功能,但不完全是

Here are the issues:

1. 仅当使用者開始填寫表單時,才会顯示弹出視窗.如果表單為空,並且使用者尝試退出頁面,則不会出現弹出視窗。

2. 使用者填寫表單並單击"提交"按钮後,將顯示弹出視窗.如果使用者尝試提交,則不應顯示该弹出視窗。

理想情况下,即使表單為空,弹出視窗也應顯示,但如果使用者通過單击"提交"按钮退出表單,則弹出視窗不應出現。

這可能吗?

最新回復
  • 5月前
    1 #

    首先,請更改函式的名稱-您應將它们的名稱与本教程的名稱相同-通常,請始终使它们具有唯一性,以减少發生冲突的可能性.因此,而不是 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 .

    現在,该 needToConfirmTRUE 頁面載入後,我们將保持原樣,直到有人點击 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

    第三个問题,我在原始代碼段中寫道:

    Quick note, if you can get the id="" of the submit button, you can swap that out below instead of my ambigious guess.

    我確實是在猜測,結果證明我的目標是不存在的元素.現在的關键是單击"提交"將禁用该訊息.但是由於没有 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
    } );
    

    這應该使您更接近所追求的目標。

  • wordpress:有什麼方法可以从publish_post钩子获取post meta?