Click On Button/submit When It Appears On Page

I have a page where a button or a submit form will appear at an unknown time. I don´t know the id, class or xpath of the button/form but i know what the text of the button will be

Solution 1:

var interval = setInterval(function () {
    if (document.querySelectorAll("input[value='Click me']").length > 0) {
        document.querySelectorAll("input[value='Click me']")[0].click();
        clearInterval(interval);
    }
}, 100);

Hope this helps..

Solution 2:

You marked this jQuery - it could be as simple as

// The code you need
var tId;
$(function() {
    tId=setInterval(function() {
      var $but=$("[value='Click me']");
      if ($but.length>0) {
        console.log("found");
        clearInterval(tId);
        $but.click();
      }  
    },100)
});


//------------------------------------------------
// other code that inserts and shows it's clicked
$(function() {
  $("#container").on("click","[value='Click me']",function() {
    console.log("clicked");
  });

  setTimeout(function() {
    $("#form1").append('<input type="button" value="Click me">');
    },3000);
});    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="div1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint</div>


        <form id="form1"> 

        </form>

        <div> occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita</div>
   </div>

Solution 3:

You can select button with attr/value selector

$('input[type="button"][value="Click  here"]').on('click',function(){
//code
});

Solution 4:

As the form/button will appear at an unknown time, You can use MutationObserver and listen DOM changes.

Here in snippet I have used setTimeout to simulate button added dynamically.

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var element = document.querySelector('#target');
setTimeout(function() {
  $(element).append('<button>Click here</button>');
}, 3000)

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "childList") {
      console.log('Button found do the needful');
      //$(":button:contains('Click here')").get(0).click();
    }
  });
});

observer.observe(element, {
  childList: true //configure it to listen to attribute changes
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>

Solution 5:

Maybe it will help:

$('input[value="ClickMe"]').click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" value="ClickMe" onclick="alert('clicked');" />