CODEWITHSUNDEEP
phpjavascript
Kam
Kam

Reputation: 6008

php echoing javascript call

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?

Upvotes: 1

Views: 137

Answers (4)

sled
sled

Reputation: 14625

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>';
?>

Upvotes: 1

Emery King
Emery King

Reputation: 3534

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.

Upvotes: 0

Devang Rathod
Devang Rathod

Reputation: 6736

When you click on Send your message call 

onclick="thanksDiv();";

Upvotes: 0

Prasanth Bendra
Prasanth Bendra

Reputation: 32750

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.

Upvotes: 0

Related Questions