javascriptphphtmliframe

EventListener doesn't work after clicking form button in iframe

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">&#10006;</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.

Solution

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