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%; 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?
4 answers
solution1
1 ACCPTED 2013-02-07 06:14:41
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>';
?>
solution2
0 2013-02-07 06:12:24
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.
solution3
0 2013-02-07 06:12:27
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.
solution4
0 2013-02-07 06:15:02
当您单击发送消息呼叫时
onclick="thanksDiv();";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.