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>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