如何检测事件侦听器及其对输入字段的操作

Question

我购买了一个预订插件 (wordpress) 以添加到网站。 https://wpamelia.com/

我无法显示我正在开发的网站，但这里有来自插件开发人员的演示 https://sports.wpamelia.com/#book

选择日期和时间后，您最终会看到一个带有输入字段的表单。 我能够使用可以通过 URL 传递的数据预先填写此表单。

我的网址看起来像这样：https://sports.wpamelia.com/?first=Jim&last=Tester&email=something%40something.com&phone=0222222222#book

但问题就在这里：

即使我设法使用 jQuery 预先填写表单的输入字段，只要我单击确认字段的内容被删除，并且每个字段都会出现错误“请输入...”。

再说一遍：

第 1 步：我打开预订页面，其 URL 包含查询字符串中的数据

第 2 步：使用 jQuery，我设法预先填写选择日期和时间后出现的表单（名字、姓氏...）

第 3 步：我点击“确认”

结果：所有字段都是空的，并且每个字段都会出现错误消息“请输入名字”（等等）

我已向插件开发人员发送了消息。唯一的答案是确实没有将查询字符串中的数据提取到表单字段中的功能。

我的问题：

1) 使用 chrome 检查器或其他工具，我如何才能知道为什么我预先填写到表单中的内容被忽略了？ ---> 我已经在 chrome 检查器的控制台中尝试过 getEventListeners 之类的东西，但我真的不知道如何从中获取信息

2) 有人知道问题出在哪里和/或我如何绕过它吗？ ---> 背后有很多来自插件开发人员的 javascript，并且期待手动将数据输入到字段中...... ---> 但即使尝试使用$(this).trigger("change").val(function(i,val){return 'aaaa';}); 之类的东西来伪造手动输入，这也不能解决问题....

（如果有人感兴趣，我可以稍后发布我的 javascript/jQuery 功能，以获取预先填充了来自查询字符串的数据的表单字段...有趣的代码，因为您必须等到字段出现才能让 jQuery 识别它们..)

非常感谢您的帮助！

干杯 管理员

Answer 1

@Admino - 这可能不是最好的解决方案，我知道这是一个老问题，所以你现在可能不需要它，但在没有找到更好的解决方案之后，它至少对我有用。

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

function valueOutput(element) {
    element.dispatchEvent(new Event('input'));
}

jQuery(function() {
    jQuery(document).on('change', 'input', function(e) {
        valueOutput(e.target);
    });

    // you may want to perform more validations here if needed
    // just checking here if email is present (but not checking for valid email address)
    var fname = getUrlVars()["first"];
    var lname = getUrlVars()["last"];
    var email = getUrlVars()["email"];
    var phone = getUrlVars()["phone"];
    var custom1 = getUrlVars()["custom1"];  // you know this field label is Order Number

    if (email.length > 0) {
        // run an interval until the elements are present on the page (form displayed)
        var checkInputs = setInterval(function() {
            if (jQuery('.amelia-app-booking label[for="customer.email"]').length > 0) {
                var em = jQuery('.amelia-app-booking label[for="customer.email"]').closest('.el-form-item').find('.el-input__inner');

                // this checks to see if an Amelia customer is already present
                if (em.val() == '') {
                    em.prop('value', email).val(email).trigger('change');
                    jQuery('.amelia-app-booking label[for="customer.firstName"]').closest('.el-form-item').find('.el-input__inner').prop('value', fname).val(fname).trigger('change');
                    jQuery('.amelia-app-booking label[for="customer.lastName"]').closest('.el-form-item').find('.el-input__inner').prop('value', lame).val(lame).trigger('change');
                    jQuery('.amelia-app-booking label[for="customer.phone"]').closest('.el-form-item').find('.el-input-group__prepend').siblings('.el-input__inner').prop('value', phone).val(phone).trigger('change');
                }
                // for custom fields I check the label text to find the correct input
                if (custom1 != '') {
                    jQuery('.amelia-app-booking label:contains("Order Number")').closest('.el-form-item').find('.el-input__inner').prop('value', custom1).val(custom1).trigger('change');
                }
                // form info is updated so clear the interval
                clearInterval(checkInputs);
            }
        }, 500);
    }
});

您可能想尝试与 url 参数不同的方法来同步此信息，以便它在 url 字符串中不那么公开。此代码可能不需要 prop 和 val jquery setter，但我只是将它们留给您尝试。希望它有所帮助（对于其他人，我愿意提供更好的解决方案）！