dynamic_text CF7_URL don’t fire onchange event

I haven’t been able to reproduce this error. Specifically, I tossed this into my local environment to test:

function panosil_listen_field_change()
{
    printf('<script>
        jQuery(document).on("change", ".wpcf7-form-control", function(e) {
            console.log("changed!",e);
        });
    </script>');
}
add_action('wp_footer', 'panosil_listen_field_change');

And changing the field values triggered successfully.

If the error is on a publicly accessible webpage you can share the URL and I can take a look for the specific issue (reminder not to share any credentials, please!).

Without looking, it could be that jQuery isn’t loaded when this script is run, or the field type is a radio or checkbox where the change doesn’t actually get triggered because their values don’t change, only their attributes/properties do.

Perhaps listening for keyup and/or blur for text-based fields and click for radio buttons and checkboxes could work better for you?

Not the simple usage of dynamic_text, the “CF7_URL part=’query’” type of usage! When the element dynamically takes the url parameters as value.
In previous version (dynamictext) when there was some parameters in the url (let’s say https://whateverdomain.com/?param=test) the dynamictext element was firing the onchange event.
Now the dynamic_text element it doesn’t fire the event…

• This reply was modified 1 year ago by panosil.

That’s because the value is not actually changing on the client-side. The form tag’s HTML is rendered on the server-side during page load so by the time your JavaScript listener is applied, the value is already set.

Even if you’ve enabled cache compatibility for that field so that the value is rendered on the client-side, using JavaScript to change the value does not automatically fire the event. I don’t know if that’s a choice made in modern browsers or in jQuery over time as they also released new versions, but it’s not something our plugin has control over.

However, to meet your need, I can certainly trigger a custom event to fire when I set the value for cache compatible fields so you can adjust your listener to also include them. I don’t want to manually trigger the default change event since it’s not authentically a change, that could break other sites listening for only authentic changes. I’ll let you know when it’s updated!

Okay, I just updated to version 4.2.2 that triggers the custom dtx_init event on enabled fields. So any dynamic form tags you want have your JS listen out for should include dtx_pageload to enable cache compatibility mode like this:

[dynamic_text n-url-query dtx_pageload "CF7_URL part='query'"]

And in my functions.php of my local environment, I added this:

function panosil_listen_field_change()
{
    wp_add_inline_script('wpcf7dtx', 'console.log("Testing Changes");jQuery(document).on("change dtx_init", ".wpcf7-form-control", function(e) {
        console.log("changed!",e);
    });', 'before');
}
add_action('wp_enqueue_scripts', 'panosil_listen_field_change');

Instead of just .on('change', it’s now .on('change dtx_init',so the function listens to both changes and the custom event that fires when DTX initializes the field with the customized default value.

In my test code, I also changed the action to wp_enqueue_scripts and used the wp_add_inline_script() function targeting the DTX cache script with it’s handle wpcf7dtx with the placement before (third parameter) so that the listener is in place before the DTX JS is run, ensuring it’s always there by the time the event gets triggered.

Hope this works for you!

Yes worked! Thanks!!!

The only deference is that now I have to check both .value and .defaultValue to take the elements value…
When the onchange event occurs, the value goes at element.value, but when the dtx_init event occurs, the value goes to the element.defaultValue.
I think I got it correct, but this way is working now for me!

Thanks!
If I find anything else I will inform you.
Thank you very much!

• This reply was modified 1 year ago by panosil.

Glad to hear!