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>

score 0 · Answer 1 · answered Jan 19 '22 at 08:54

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

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

1 Answers1