How to detect button value change in JQuery?

Question

I've a sign up form which has submit button with value "GET INSTANT ACCESS!" :

<input type="submit" class="wf-button" name="submit" value="GET INSTANT ACCESS!">

After submit, the value gets change to 'Thank You!':

<input type="button" class="wf-button" value="Thank You!">

I need to detect the button value. If it becomes "Thanks You!" then I have to show a popup. And this value gets change by some Ajax (GetResponse form). There is no page refresh.

I've tried below code but it is only working in FireFox & not working in Chrome.

<script>
    $(function() {
        $(".modalbox").fancybox();
    });
    $(function() {
        $('.wf-button').bind("DOMSubtreeModified",function(){
            //if btn valu is 'Thank You! trigger popup'                    
            $(".modalbox").trigger('click');

        });
    });
</script>

Live URL: http://www.idynbiz.com/web/html/gold_ira_vf/? (just to show how the button changes its value)

Can some one help how can I detect the button value and show my popup? The button change its value in real time (Ajax). There is not page refresh.

Is there any JQuery approach with bind() Or on() function to detect the value?

Use `window.location.reload();` before doing `.bind()` or you can use `.val()` to fetch value of some tag. — Prabhu Vignesh Rajagopal, Feb 06 '15 at 06:59
This link might be helpful. http://stackoverflow.com/questions/7837510/domsubtreemodified-not-working-in-chrome — Dinoop mathew, Feb 06 '15 at 07:00
@PrabhuVigneshRajagopal, I can not use page reload. the .val() doesn't tell the value in run time. — Irfan, Feb 06 '15 at 07:04
@IrfanDayan Ok but your link seems like working in both firefox and chrome. — Prabhu Vignesh Rajagopal, Feb 06 '15 at 07:13
@PrabhuVigneshRajagopal, Link is to just show you the button and how it changes it value. There is no trigger after values get change and that is i want. — Irfan, Feb 06 '15 at 07:15
Did any of the answers below answer your question? If so, will you please mark it as "accepted"? Thanks! — Bitwise Creative, Feb 17 '15 at 02:53

score 1 · Answer 1 · answered Feb 06 '15 at 07:24

$(function() {
  $('.btn1').on('change', function() {
    alert('Do stuff...');
  });
  $('.lnk1').on('click', function() {
    $('.btn1').val('Thank you!');
    $('.btn1').trigger('change');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="submit" class="btn1" value="SUBSCRIBE" />
<a href="#" class="lnk1">Change button value</a>

score 0 · Answer 2 · answered Feb 06 '15 at 07:29

OK , when button is clicked and form is submitted for saving. just write these code

$(document).ready(function ()
{
   $('.wf-button').click(function ()
   {
     var valueofbutton = $(this).attr('value');
     if(valueofbutton == 'Thank You!')
       {
          window.open(); //// whatever you want to open in popup
       }
   });
});

i m sure that this will work

score 0 · Answer 3 · answered Jun 22 '17 at 11:38

You can use the following function in javascript which gets called after any > kind of postback, i.e. synchronous or asynchronous.

function pageLoad() { if($(".wf-button").val()=="Thank You!") { // show your popup } }

Hope it works....

How to detect button value change in JQuery?

3 Answers3

Linked