Javascript to Detect text and then click close button of popup

Question

I have a embedded form on popup.

When the popup appears and after that when the form is filled, success message Comes "Thank You For subscribing".

What i am trying to achieve is on detection of message, the close button of popup with ID #buttonidclose should be clicked via js automatically.

Here is the html:

<div id="popmake-9255" class="pum-container popmake theme-3633 pum-responsive pum-responsive-medium responsive size-medium active custom-position" style="min-width: 0%; max-width: 100%; top: 175px; left: 683.688px; opacity: 1;">
   <div class="pum-content popmake-content">
      <p>
         <!-- Begin Mailchimp Signup Form -->
      </p>
      <div id="mc_embed_signup">
         <form action="https://lbs.us15.list-manage.com/subscribe/post?u=ab37ecab7ff05893ae4a5b4fa&amp;id=d918d8cb05" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate">
            <input type="hidden" name="pum_form_popup_id" value="9255">
            <div id="mc_embed_signup_scroll">
               <h2>Subscribe to download our brochure</h2>
               <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
               <div class="mc-field-group">
                  <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span><br>
                  </label><br>
                  <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" aria-required="true">
               </div>
               <div class="mc-field-group">
                  <label for="mce-FNAME">First Name  <span class="asterisk">*</span><br>
                  </label><br>
                  <input type="text" value="" name="FNAME" class="required" id="mce-FNAME" aria-required="true">
               </div>
               <div class="mc-field-group">
                  <label for="mce-LNAME">Last Name </label><br>
                  <input type="text" value="" name="LNAME" class="" id="mce-LNAME">
               </div>
               <div class="mc-field-group size1of2">
                  <label for="mce-PHONE">Phone Number  <span class="asterisk">*</span><br>
                  </label><br>
                  <input type="text" name="PHONE" class="required" value="" id="mce-PHONE" aria-required="true">
               </div>
               <div id="mce-responses" class="clear">
                  <div class="response" id="mce-error-response" style="display:none"></div>
                  <div class="response" id="mce-success-response" style="display:none"></div>
               </div>
               <p>
                  <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
               </p>
               <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ab37ecab7ff05893ae4a5b4fa_d918d8cb05" tabindex="0" value=""></div>
               <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn btn-primary"></div>
            </div>
         </form>
      </div>
      <p>
         <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='PHONE';ftypes[4]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);</script><br>
         <!--End mc_embed_signup-->
      </p>
   </div>
   <button type="button" class="pum-close popmake-close" aria-label="Close">
   ×            </button>
</div>

Please guide me.

check this out. : https://api.jquery.com/click/ should be what you are loocking for — Matt.S, Dec 17 '18 at 13:22
@Matt.S First of all, it's an embeded maichimp form, How detect the success message ? — Nimesh, Dec 17 '18 at 13:25
could you please post some code you tried so far? And the markup of the popup? Is it contained within an ``? I'm afraid this is too broad to answer with the available information — Tom M, Dec 17 '18 at 13:26
@TomM Please check, i have updated and added code to question — Nimesh, Dec 17 '18 at 13:33

Tom M · Accepted Answer · 2018-12-18T10:40:44.877

1

I'd recommend using the MutationObserver API.

Also have a look at the browser support for this api

if ($('.pum-overlay').length > 0) {

    // the mutationobserver api needs a DOM node, not a jquery object. 
    // You can access the node by appending [0] to the jquery call.
    var targetNode = $('.pum-overlay')[0];
    var config = { childList: true, subtree: true};


    var callback = function (mutationsList, observer) {
        for (var mutation of mutationsList) {
            if ($('#mce-success-response').text().indexOf('Thank you for subscribing!') >= 0 ) { 
                $('.pum-close').trigger('click');
            }
        }
    };

    var observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
}

code taken from mozilla example and altered

edited Dec 18 '18 at 10:40

answered Dec 17 '18 at 16:40

Tom M

2,815
2
20
47

I tried it on my server it didn't work though. Here is the link https://www.lbs.edu.ng/executive-education/executive-programmes/ , click on download brochure button at bottom of page, after that popup will appear, and when success message comes nothing happens. – Nimesh Dec 17 '18 at 18:16
if you open the dev tools by pressing f12, you will see the error `Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.`. That's because `#pum-container` is not present in the DOM before the lightbox is created. Change it to ` $('.pum-overlay')[0]` and it should work. I also updated the code to check if `$('pum-overlay')` is found on the page. – Tom M Dec 17 '18 at 18:21
@Nimesh are you sure? It appears to be working when filling out your form – Tom M Dec 18 '18 at 09:06
Yes i found a solution, a bit of alteration to your code. Here is the link, https://jsfiddle.net/rL0qkh5v/ Please update your answer thank you. – Nimesh Dec 18 '18 at 10:28
Glad I could help. I think the answer is fine as-is since it does not have to represent the solution to your specific problem but rather be of use for people visiting this site in the future. The timeout and the matching are too specific in my opinion. – Tom M Dec 18 '18 at 10:31
1

Well, actually the text matching is broken in my example so I'll apply that part of your edit – Tom M Dec 18 '18 at 10:38
Well thanks, i was trying to understand the whole process. Your previous was logically right, but i couldn't find out why it didn't work. Have you found the reason ? – Nimesh Dec 19 '18 at 18:10
1

@Nimesh yeah, I matched using `$().text` instead of `$().text()` thinking it is a simple property instead of a method. Also, you changed the capitalization of the string in your edit so it differed from the one originally posted. – Tom M Dec 19 '18 at 18:26

score 0 · Answer 2 · answered Dec 17 '18 at 13:27

0

What you can do is make a variable with boolean variable make it false by default and change it's value to true when the form is filled and then initiate the function

function ClickClose (){
while (variable == true){
//    change class name here
}
}

you may do it an another way as you like this can be a one of the ways ...

answered Dec 17 '18 at 13:27

Arush Singh

129
1
10

Can you please guide me step by step with code i can check. Help Appreciated! – Nimesh Dec 17 '18 at 13:34
var a = false ;
function clickClose(){ while (variable == false ){ document.getElementById("test").classList.add(test1'); document.getElementById("MyElement").classList.remove('name of the class you want to remove '); } } this is a plain example ... some what will give you the idea – Arush Singh Dec 17 '18 at 13:38
please check event's in javascript stackoverflow.com/a/906565/9524541 – Arush Singh Dec 17 '18 at 13:47
You didn't my get my question. At first i want to detect if the text appears on page and if yes the click function will be applicable. How to check for that text ? – Nimesh Dec 17 '18 at 15:50
what you want to detect is if the div is empty or not for that you may use var isEmpty = document.getElementById('dummyId').innerHTML === ""; and if using jquery var isEmpty = $("#dummyId").html() === ""; – Arush Singh Dec 18 '18 at 05:33

Javascript to Detect text and then click close button of popup

2 Answers2