Question

我已经购买了预订插件（wordpress）以添加到网站。 https://wpamelia.com/

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

选择日期和时间后，最终将进入带有输入字段的表单。我能够用可以通过URL传递的数据来预先填写此表单。

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

但这是问题所在：

即使我设法使用jQuery来预先填写表单的输入字段，但只要单击确定，就立即删除了字段的内容，并为每个字段显示错误“请输入...”。 / p>

再次如此：

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

步骤2：我使用jQuery，预先填写了选择日期和时间（名字，姓氏……）后出现的表单

步骤3：我点击“确认”

结果：所有字段均为空，并且每个字段均显示错误消息“请输入名字”（等）。

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

我的问题：

1）我如何使用chrome inspector或其他工具找出为什么我预先填写到表单中的内容会被忽略？ --->我已经在chrome inpector的控制台中尝试过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，但我只是将它们留给您尝试。希望对您有所帮助（对其他人，我愿意寻求更好的解决方案）！

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

1 个答案: