I have the code to close form when clicking button inside iframe:
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<script>
$(document).ready(function(){
$("#popup1").hide();
});
window.onload=function(){
document.getElementById("popup1")
.contentWindow.document.getElementById("hidepopout")
.addEventListener("click", PopUpHide, false);
function PopUpHide(){
$("#popup1").hide();
document.getElementById("popup1").contentWindow.document.getElementById("form").reset();
}
}
</script>
</head>
<body>
<iframe class="b-popup" id="popup1" src="index2.php" title="contact form">
</iframe>
<button onclick="PopUpShow()">Contact me</button>
<script>
function PopUpShow(){
$("#popup1").show();
}
</script>
</main>
<footer></footer>
</div>
</body>
</html>
index2.php - iframe content with button
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../CSS/Form.css">
<title>Contact Us</title>
</head>
<body>
<?php
if (!empty($success)) {
?>
<div class="alert alert-success">Your message was sent successfully!</div>
<?php
}
?>
<?php
if (!empty($error)) {
?>
<div class="alert alert-danger"><?= $error ?></div>
<?php
}
?>
<button id="hidepopout">✖</button>
<form id="form" method="post" action="submit.php">
<button id="sendmsg" class="btn btn-primary btn-block">Send Message</button>
</form>
</body>
</html>
The button doesn't hide iframe, if I click on form button with id "sendmsg". Looks like there is no event handler in that case. But it works if I don't touch this button.
This entire setup might work although a more modern approach would be to use the postMessage
method and the message
event.
Anyway, since you decided to attach the events inside the iframe
page, you need to wait for that window to load.
For example:
<iframe onload="attachTheEvents(this)"></iframe>
<script>
function attachTheEvents(iframe) {
iframe.contentWindow.document.getElementById("etc");
}
</script>