php echoing javascript call

Question

I am a newbi to webdesign/php and javascript and I am having a problem. Please look at this code:

  <script type="text/javascript">
<!--
function thanksDiv(){
    document.getElementById("myThanksDiv").style.display ='block';
}
function hideDiv(id){
    document.getElementById(id).style.display='none';
}

//-->
</script>

        <form id="contacts-form" method="post" action="email.php" target="myiframe">
           <fieldset>

           <div class="alignright"><a href="#" onClick="document.getElementById('contacts-form').submit()">Send Your Message!</a></div>
           </fieldset>
        </form>

<iframe  name="myiframe" id="myiframe" src="" width=1 height=1 style="visibility:hidden;position:absolute;"></iframe>

<div id="myThanksDiv" style="width:200px;height:150px;position:absolute;left:50&#37;; top:20px; margin-left:-100px;border:1px solid black; background:#fff;display:none;padding:20px;">Thanks! <br />Your message was sent.</div>

and in email.php:

echo '<script type="text/javascript">'
   , thanksDiv();'
   , '</script>';
?>

The idea is that when I click on 'Send Your Message' I should see a box saying 'message was sent', but I don't.

If I don't go through the email.php page and I just call thanksDiv from the form submit link it works. Any idea why?

sled · Accepted Answer · 2013-02-07T12:29:51.117

the javascript in your iframe is not on the same "scope" as your parent document where the function is defined.

In order to call it try:

echo '<script type="text/javascript">'
   , 'parent.thanksDiv();'
   , '</script>';

The difference is the "parent" which tells JS to look in the frame's parent for the function ;)

Please make sure all is on the same domain/port, otherwise you could violate the Same Origin Policy and it therefore might not work.

Edit

Here is a configuration that works fine on my machine (PHP5, Firefox):

test.html

<html>
<head>
  <script type="text/javascript">
  <!--
    function thanksDiv(){
      document.getElementById("myThanksDiv").style.display ='block';
    }
    function hideDiv(id){
      document.getElementById(id).style.display='none';
    }
  //-->
  </script>
</head>
<body>
  <form id="contacts-form" method="post" action="email.php" target="myiframe">
    <fieldset>
      <div class="alignright"><a href="#" onClick="document.getElementById('contacts-form').submit()">Send Your Message!</a></div>
    </fieldset>
  </form>

  <iframe  name="myiframe" id="myiframe" src="" width=1 height=1 style="visibility:hidden;position:absolute;"></iframe>

  <div id="myThanksDiv" style="width:200px;height:150px;position:absolute;left:50px;top:20px; border:1px solid black; background:#fff;display:none;padding:20px;">Thanks! <br />Your message was sent.</div>
</body>
</html>

email.php:

<?php
echo '<script type="text/javascript">parent.thanksDiv();</script>';
?>

That didn't work, when I click submit I am taken to an empty page :$ — Kam, Feb 07 '13 at 06:17
hi, sorry I have to go to work now ;) please have a look at this problem here: http://stackoverflow.com/questions/2161388/iframe-function-calling-from-iframe-to-parent-page-javascript-function?rq=1 In order to debug your code, make the iframe visible and display something on it so that you know that everything else is working and the response is displayed in the iframe. Once that works, add the javascript to your response. I'll try to make a better answer in a few hours ;) — sled, Feb 07 '13 at 06:28
see my edit, this is the most basic version - and it should work (tested with Firefox, PHP5). If this works on your machine too, but your actual setup doesn't it's most likely another bug in your code. Check for Javascript errors in the browser, and make sure the form actually gets submitted to the iframe (make the iframe visible and echo some text from your email.php script - it should appear in the iframe). — sled, Feb 07 '13 at 12:31

Emery King · Answer 2 · 2013-02-07T06:22:10.073

0

All the content from the form page will be gone on the next page. So there is no longer a thanksDiv function. When you submit the form you are going to a different page entirely.

Calling the function directly works because you are still on that page.

Create a success.html page for instance and in email.php instead of echoing js do this:

header('Location: http://www.yoursite.com/success.html');

Which will redirect to success page.

edited Feb 07 '13 at 06:22

answered Feb 07 '13 at 06:12

Emery King

3,550
23
34

You are correct, so how can I do what I want to achieve? email.php send an email and when successful I would like to see a box with a message :$ – Kam Feb 07 '13 at 06:19
...but he submits the form to an iframe, so the page won't be switched, the response is displayed in the iframe where he wants to call a function on the parent's document which should be possible ;) – sled Feb 07 '13 at 06:24
exactly I don't want to load another page. Is there no way I can do this? – Kam Feb 07 '13 at 06:25
Oh, i didn't realize you were submitting to the iframe. sorry. – Emery King Feb 07 '13 at 06:31

score 0 · Answer 3 · answered Feb 07 '13 at 06:12

echo '<script type="text/javascript">'
   , 'thanksDiv();'
   , '</script>';

Missing ' in second line.

function thanksDiv(){
    document.getElementById("myThanksDiv").style.display ='block';
}

this function should be there in email.php tooo. OR add it a separate page and include page there.

score 0 · Answer 4 · answered Feb 07 '13 at 06:15

0

When you click on Send your message call

onclick="thanksDiv();";

answered Feb 07 '13 at 06:15

Devang Rathod

6,650
2
23
32

php echoing javascript call

4 Answers4