我需要一些帮助。我正在尝试在WordPress上创建一个确认导航弹出菜单。我希望当用户尝试在不提交表单的情况下退出表单页面时出现弹出窗口。
弹出窗口的屏幕截图：https://ibb.co/3CvqgKH
我使用Forminator表单插件来创建表单。
我发现了这篇文章：https://www.greengeeks.com/tutorials/article/incomplete-form-confirmation-in-wordpress/
我按照指南创建了一个自定义插件，它可以正常工作。
以下是我所做的：
1.在我的计算机上创建了一个名为confirm-leaving-form的文件夹。
2.在文件夹中添加了一个名为confirm-leaving.php的PHP文件：
<?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。在confirm-leaving-form文件夹中创建了另一个名为js的文件夹。
4.在新的js文件夹中添加了一个名为confirm-leaving.js的JavaScript文件：
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文件夹上传到"/插件/"；我的网站目录(使用FileZilla FTP应用程序(。
6.在WordPress上激活了新插件。
问题如下：
1。只有当用户开始填写表单时，才会出现弹出窗口。如果表单为空，并且用户尝试退出页面，则不会出现弹出菜单。
2.如果用户没有回答任何单选、复选框、选择等问题，则不会出现弹出窗口。文本输入问题不会触发弹出窗口。
3.当用户填写表单并点击"提交"按钮时，弹出窗口出现。如果用户试图提交，则不应出现弹出窗口。
理想情况下，我希望退出确认弹出窗口出现，即使from为空，但当用户完成表单并尝试提交时不会出现。
这可能吗？
我的表单页面的URL：https://mydreamtattoo.com/tattoo-design-form/
由于您的目标是在用户不与表单交互的情况下触发离开意图，因此您想要的与页面的正常离开意图没有什么不同。我会考虑使用一个为此设计的插件，而不是这种方法。如果你想继续沿着这条路走下去，你可以这样修改你的javascript：
var needToConfirm = true;
function askConfirm() {
if (needToConfirm) {
// Put your custom message here
return "Leaving so soon? Your data will be lost if you continue.";
}
}
jQuery(document).ready(function($) {
window.onbeforeunload = askConfirm;
$("#forminator-module-2959").on('submit', function() {
needToConfirm = false;
});
});
这基本上将其设置为默认情况下；需要确认"；但是如果他们提交了表单，它将needToConfirm转换为false。最有可能的是，你可能想要更详细的javascript来处理验证用例，但这就是它的要点
就其价值而言，该作者文章中的代码并不好。如果它能满足你的需求，那没关系，但实际上，为它制作插件的整个方法都很愚蠢。