Simple iframe issue

Question

After submitting a form into an iframe my page isn't reloaded (that's what I want) but it scroll up to the top. How can I prevent that?

<script type="text/javascript">
    function showThanksDiv(){
      document.getElementById("myThanksDiv").style.visibility = "visible";
    }
</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;bottom:2px;"></iframe>

<div id="myThanksDiv" style="width:200px;height:150px; border:1px solid black; background:#fff;display:block;padding:20px; visibility:hidden">
Thanks! <br />
Your message was sent. <br />
<div class="alignright"><a href="#!" onClick="javascript:hideThanksDiv()">Discard Message!</a></div>
              </div>

in email.php:

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

When I click submit button I am always redirected to the top of the page (not reloaded). why?

Bascially the issue is that the echo from the php script will call showThanksDiv and scroll to top. How can I prevent that?

Thanks,

Answer 1

This happens because of this

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

Change it to this; return false;

<a href="#" onClick="document.getElementById('contacts-form').submit();return false">Send Your Message!</a