How to detect Event Listeners and their actions on input fields

Question

I have purchased a booking plugin (wordpress) to add to a site. https://wpamelia.com/

I cannot show the site I am working on, but here a demo from plugin developers https://sports.wpamelia.com/#book

Once you have chosen your date and time, you end up on a form with input fields. I was able to pre-fill this form with data that I could pass via the URL.

My URL would look something like this: https://sports.wpamelia.com/?first=Jim&last=Tester&email=something%40something.com&phone=0222222222#book

But here is the problem:

Even though I managed to use jQuery to pre-fill the input fields of the form, as soon as I click confirm the fields' content is erased and the error "Please enter... " appears for each of them.

So again:

STEP 1: I open the booking page with an URL containing data in the query string

STEP 2: Using jQuery, I manage to pre-fill the form that appears after having chosen date and time (first name, last name ...)

STEP 3: I click "Confirm"

RESULT: all the fields are empty and for each one the error message "Please enter first name" (etc..) appears

I've messaged the plugin developers. Only answer was that there is indeed no functionality to take the data from the Query String into the form fields yet.

MY QUESTIONS:

1) How could I find out, with chrome inspector or other tools, why exactly the content I pre-fill into the form is ignored? ---> I've tried things like getEventListeners in the chrome inpector's console, but I don't really see how to get information out of that

2) Would anyone know what the issue is and/or how I could bypass it? ---> there is a lot of javascript from the plugin developers behind that and something is expecting manual entering of the data into the fields... ---> but even when trying to fake manual entering with things like $(this).trigger("change").val(function(i,val){return 'aaaa';}); this didn't solve the problem....

(If anyone is interested, I can post later my javascript/jQuery functionality to get the form fields pre-filled with data from Query String... interesting code as you have to wait until the fields appear for jQuery to recognise them..)

Thanks so much for any help!

cheers Admino

Answer 1

@Admino - this may not be the best solution and I know this is an old question so you may not need it now but after not finding a better one it at least worked for me.

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);
    }
});

You may want to try a different method than url params to sync this info so it's not so public in the url string. This code may not need both the prop and val jquery setters but I just left them for you to try. Hope it helps (and to others I'm open to a better solution)!