When Contact Form Validation Text Changes Do Something ONCE

JavaScript
1

Hi all,

I’m an using a single form (Contact Form 7), and trying to add an image to the form response div when the button submit button is pressed.

So far, I was able to get the image added by using:

$('.wpcf7-response-output').bind("DOMSubtreeModified",function(){
            let nessieLarge = ('<img src="/wp-content/uploads/2020/04/nessie-icon-large.png" class="nessie-confirmation" />');
            $(nessieLarge).appendTo('.wpcf7-response-output');
        });
    });

However, this isn’t idea because it added the image image about 100 times (not sure why)!

I just need it to add it once. SO, I tried to wrap this like the code below, however, while this doesn’t throw errors, it doesn’t output or appendTo the image.

Is there another way I should be combining the .bind and .one functions to get this to output an image ONCE when the submit button is pressed and the output text changes?

$('.wpcf7-response-output').bind("DOMSubtreeModified",function(){
        $(this).one(function () {
            let nessieLarge = ('<img src="/wp-content/uploads/2020/04/nessie-icon-large.png" class="nessie-confirmation" />');
            $(nessieLarge).appendTo('.wpcf7-response-output');
        });
    });

This is the basic markup I’m trying to manipulate:

<div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors" style="display: block;" role="alert">Looks like something is missing, double check your info.</div>

And, here’s the website! Form is a scroll down.
https://nessiedev.wpengine.com/#contactForm

Thank you kindly for your thoughts on this!

2

So you’ve bound something that says “When something under this is modified, fire this function.”
The function then… modifies something underneath the trigger element.

Do we perhaps see why that might be a problem? ∞

Incidentally, “DOMSubtreeModified” is a Deprecated event.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.