我已经购买了一个预订插件(wordpress)添加到一个网站。https://wpamelia.com/
我无法显示我正在工作的站点,但这里是插件开发人员https://sports.wpamelia.com/#book的演示。
一旦选择了日期和时间,就会在带有输入字段的窗体上结束。我能够预先填写这张表格的数据,我可以通过网址传递。
但问题是:
即使我成功地使用jQuery预先填充了表单的输入字段,只要单击“确认”字段的内容被删除,错误“请输入.”他们中的每一个都会出现。
因此,再次指出:
步骤1: i使用包含查询字符串中数据的打开预订页面
步骤2:使用jQuery,我设法预先填写在选择日期和时间之后出现的表单(名、姓.)
步骤3: i单击“确认”
结果:所有字段都是空的,每个字段都有错误消息“请输入名字”(等等)出现
我给插件开发者发了消息。唯一的答案是,还没有将查询字符串中的数据输入表单字段的功能。
我的问题:
( 1)我如何用铬检查器或其他工具来找出,为什么我在表单中预先填写的内容被忽略了?->我在chrome inpector的控制台中尝试过getEventListeners之类的东西,但我不知道如何从其中获取信息。
( 2)有人知道问题是什么和/或我如何绕过它吗?->这个问题背后的插件开发人员有很多javascript,有些东西期望手动将数据输入字段.
(如果有人感兴趣,我可以稍后发布我的javascript/jQuery功能,使表单字段预先填充查询字符串中的数据.有趣的代码,因为您必须等到字段出现时jQuery才能识别它们。)
非常感谢你的帮助!
欢呼声行政
发布于 2020-11-20 14:26:31
@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 params的方法来同步这个信息,这样它在url字符串中就不会那么公开了。这段代码可能不需要螺旋桨和val设置器,但我只留下它们供您尝试。希望它有帮助(并且对其他人来说,我愿意接受一个更好的解决方案)!
https://stackoverflow.com/questions/55633348
复制相似问题