Jump to content

JS pop up iframe, iframe to talk to parent page on submit?


scotchegg78

Recommended Posts

Hi Guys

 

I have some code - working, however I would like to improve it if i could.

 

I have JS controlling a pop up div, which contains an iframe.

The iframe itself is a simple email form, which I would like to send an email / invite to the entered email address.

then after my iframe i have a close link to hide the div.

 

however would it be possible to have the form submition on the iframe close or set the parent page div to display none aswell?

 

here is the code so far..

 

Parent page...

 	<script language="JavaScript">
function $(id) {
  return document.getElementById(id);
}

function bootstrap() {
  scripttag = $('script');
  if (!scripttag)
    return;
  text = scripttag.childNodes[0].nodeValue;
  eval(text);
}
</script>
<style type="text/css">

/* Personal add-ons */

.popup {
  position: absolute; display: none;
  
}
</style>
</head>

<body onload="bootstrap()">
....

<div id="profile_right">
	<p style="padding: .0em; ">
<a href="javascript:var f=$('regform'); f.style.display=(f.style.display=='block'?'none':'block');
/* $('namefield').focus(); */ void 0;"
><img src="/images/invite.jpg" alt="Invite Friend" /></a>
<div id=regform class="popup">
<iframe SRC="invite.php" name="ECIframe" id="ECIframe" width="205" height="108" frameborder="0"></iframe><br clear=all>
<a href=\"javascript:var f=$('regform'); f.style.display=(f.style.display=='block'?'none':'block');
/* $('namefield').focus(); */ void 0;">close</a>
</div>
</p>;

 

and the iframe form...

 

 

<form name="email_friend" method="POST"
  onsubmit="$('regform').style.display='none'; return false;"
  class="subtle small";
  style="position: relative; left: 1em; top: 2px;">
  <table>
  <tr>
   <td class=label>Name:</td>
   <td><input id=namefield name="name" type="text" size="30"></td>
  </tr>
  <tr>
   <td class=label>Email:</td>
   <td><input name="name" type="text" size="30"></td>
  </tr>
  <tr>
   <td colspan=2 align=center>
    <input type=submit value="Invite"><input name="email_friend" type="hidden" value="1" />
   </td>
  </tr>
  </table>
</form>

 

hope this is clear?

 

thanks for any input

 

You can use "top" as a reference to the current window. So something like top.document.body.yourDiv.style = whatever. I think if you use "self" in the iframe code it will give you a reference to the iframe window to which you can access the parentElement property which should be a reference to the element on your main page that created the div.

 

I really didn't look over your code to much, but either of these methods should work fine. One might be better depending on the other methods you use.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.