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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

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