首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何检测事件侦听器及其在输入字段中的操作

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

Stack Overflow用户
提问于 2019-04-11 13:12:56
回答 1查看 426关注 0票数 1

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

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

一旦选择了日期和时间,就会在带有输入字段的窗体上结束。我能够预先填写这张表格的数据,我可以通过网址传递。

我的网址应该是这样的:https://sports.wpamelia.com/?first=Jim&last=Tester&email=something%40something.com&phone=0222222222#book

但问题是:

即使我成功地使用jQuery预先填充了表单的输入字段,只要单击“确认”字段的内容被删除,错误“请输入.”他们中的每一个都会出现。

因此,再次指出:

步骤1: i使用包含查询字符串中数据的打开预订页面

步骤2:使用jQuery,我设法预先填写在选择日期和时间之后出现的表单(名、姓.)

步骤3: i单击“确认”

结果:所有字段都是空的,每个字段都有错误消息“请输入名字”(等等)出现

我给插件开发者发了消息。唯一的答案是,还没有将查询字符串中的数据输入表单字段的功能。

我的问题:

( 1)我如何用铬检查器或其他工具来找出,为什么我在表单中预先填写的内容被忽略了?->我在chrome inpector的控制台中尝试过getEventListeners之类的东西,但我不知道如何从其中获取信息。

( 2)有人知道问题是什么和/或我如何绕过它吗?->这个问题背后的插件开发人员有很多javascript,有些东西期望手动将数据输入字段.

(如果有人感兴趣,我可以稍后发布我的javascript/jQuery功能,使表单字段预先填充查询字符串中的数据.有趣的代码,因为您必须等到字段出现时jQuery才能识别它们。)

非常感谢你的帮助!

欢呼声行政

EN

回答 1

Stack Overflow用户

发布于 2020-11-20 14:26:31

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

代码语言:javascript
复制
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 params的方法来同步这个信息,这样它在url字符串中就不会那么公开了。这段代码可能不需要螺旋桨和val设置器,但我只留下它们供您尝试。希望它有帮助(并且对其他人来说,我愿意接受一个更好的解决方案)!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55633348

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档