How to capture the button click on adobe sign form embedded inside iframe

Question

I have an adobe sign form that is opening in an iframe. On click of a button with class name "agree-to-terms" inside" the adobe sign form I want to change the behavior of "Submit" button which is on the webpage. So basically I have 2 radio buttons and submit button(which is initially diabled) on the webpage. On selection of "yes" radio button the iframe is opening which has adobe sign form embedded in it. I want to enable the submit button on click of a button with classname "agree-to-terms" on adobe sign form.

Here is what i have tried

function ideaform() {
  document.getElementById("myiframe").src = "adobe sign url";
  $("#myiframe_forms").show();

  $("#myfetching_form").show();
  $('#idea_sbmt').css({
    'background-color': '#0071ce',
    'pointer-events': 'auto',
    'border': '1px solid #0071ce',
    'color': 'white'
  });
  setTimeout(function() {
    $("#myfetching_form").hide();
  }, 3000);

  //I tried both the ways

  1) $("#myiframe").load(function() {
$("#myiframe").contents().on("click", ".agree-to-terms", function() {
  console.log("inside frame loaddddd")
});
});

2) $(document).ready(function() {
  console.log("insideeeeeeee frameee")
  $("#myiframe").contents(".agree-to-terms").click((functionToRun));
});

function functionToRun() {
  console.log("alllllllllleeerrrrrrtttttttt")
}

<div id="submit-cont" style="display: flex; justify-content: space-between;">
  <div>
    <input type="radio" id="yes" name="yesno" value="yes" onchange="ideaform()">
    <label for="yes">I understand. Take me to the agreement to review and sign if I
                        agree.</label><br><br>
    <input type="radio" id="no" name="yesno" value="no" onchange="noideaform()">
    <label for="no">No thank you. Let me think about it some more.</label><br>
  </div>
  <div>
    <button id="idea_sbmt" onclick="showIdeaSubmission()">Submit</button>
  </div>

</div>
<div id="myiframe_forms">
  <div class="banner">
    <div id="myDiv" class="img-wrapper">
      <p class="close_button" onclick="dismiss_iframe_forms()"><b>Close</b></p>
      <h1 id="myfetching_form" style="margin-top: 150px; color:#0071ce;"><b>Fetching your form...</b>
      </h1>
      <iframe id="myiframe" src=""></iframe>
    </div>
  </div>
</div>

Answer 1

You cannot access the iframe DOM if the content is from a different domain (cross-domain access).

There is only limited information available when the user interacts with the iframe. For example, here you can see how to detect a click on the iframe (without knowing exactly where the user clicked): https://jsfiddle.net/oqjgzsm0/

var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(elem && elem.tagName == 'IFRAME'){
        message.innerHTML = 'Clicked';
        clearInterval(monitor);
    }
}, 100);

Also read: Detect Click into Iframe using JavaScript

Answer 2

Although it is correct that you cannot access the direct content of an iframe, it is possible to exchange messages with the embedding window. Adobe Sign widgets utilize postMessage to publish events. See the official documentation with all possible events here.

So what you could do is listen for message events from a specific origin like so:

function eventHandler(event) {
    if (event.origin.includes("adobesign.com")) {
        console.log("Event from adobe sign widget:", JSON.parse(event.data));
       // Do your handling
    }
}
window.addEventListener("message", eventHandler, false);

Unfortunately there is (currently) no dedicated event emitted on interaction on a specific input within the form.