0

After clicking the submit button it will automatically go to the top of the page. Especially on a mobile you will not be able to see the thank you message (Thank you for your message). Below you'll find the code.

<input type="submit" id="submit" name="submit" value="Send Message">
</div><!-- end .submit -->
</form>
<?php else: ?>
<p style="font-size:13pt; font-weight:bold; font-family:Cambria, Times, 'Times New Roman', serif; color:#0F243E; margin-left:0px;">Thank you for your Message!</p>
<script type="text/javascript"> 
setTimeout('ourRedirect()', 9000)
function ourRedirect () {
location.href='../'
}
</script>
<?php endif; ?>
</div> <!-- end form -->

I have been trying all sorts of things but none of them seem to work. Does anyone have an idea? Thank you!

Rone
  • 35
  • 8

3 Answers3

0

You can try using javascript to submit the form without reloading using ajax. Jquery scroll is good to go but when the form reloaded you have to find if any messages thrown then you have to point out the location.

I suggest you to use ajax form submit without reloading the page. enter link description here

Rakesh Kumar
  • 51
  • 3
  • Thank you for the suggestion. Although my programming skills aren't the best. Hoping to find an easier solution. – Rone Jul 25 '18 at 10:10
  • hi, You can provide us some more coding. i can give you suggestion for form submit using ajax – Rakesh Kumar Jul 25 '18 at 10:16
0

NOTICE:

This solution shows the message instantly but submits the form only later, which may not be what you want. If the user closes the page in 9 seconds after clicking, no submit has been performed at all!

The solution to this is using AJAX, which requires way more knowledge and code than shown here.

If you have a

<input type="submit" id="submit" ...

it will submit the page instantly and that's not what you want.

Instead, use

<input type="button" id="submit" ...

You will see the message and it won't scroll up...

But it won't submit the form either. So use this JS instead of yours:

document.getElementById("submit").onclick = function ()
{
  // show message here, e.G. by setting "display: block"

  setTimeout(function () {
    document.getElementById("my-form").submit();
  }, 9000);
};

The <form> must have id="my-form" or any other identifier you prefer.

For more details about how to hide/show the message etc. I direct you to using something like:

<p id="message" style="display: none;" ...

and on the comment line where it says "// show message here":

document.getElementById("message").style = "display: block;";
pid
  • 11,472
  • 6
  • 34
  • 63
  • Thank you for your extended answer. I will look into it as soon as I can. By the way, are you saying if user closes page within 9 seconds I will not receive their message? – Rone Jul 25 '18 at 10:37
  • Yes exactly. Whatever you use it will be that way, unless you use AJAX. – pid Jul 25 '18 at 11:33
  • Oh so you're saying it is how it is now? In that case I'm not so sure. I've tested it many times. The minute I click on the submit button I receive a message immediately. That's my experience anyway. But again, thank you for your input. – Rone Jul 25 '18 at 11:38
0

Just found an easy solution myself.

Just add #thanks or any other name you want to address.

<form action="yourpage.php#thanks">

Put code below anywhere you want it to go after submitting.

<a name="thanks"></a>
Rone
  • 35
  • 8