Scroll position after submit

Dear,

I’m using this http://codepen.io/anon/pen/tcDGr as basis for my website.

Under the link Contact I put contact form with PHP validation to
check if user has filled in the fields properly. After the submit button is clicked either :

  1. the validation message (e.g. “Sorry, your name is a required field” etc)
  2. or message “Thank you for filling out the form” (if all the fields were filled properly ) is displayed .

However, after the submit button is clicked the page jumps back to the first page, showing the “About” page.
If you navigate back to “Contact” page you can see the messages.
You can see it here:

http://webinspiration.net78.net/Codepen4/index.php

This is very annoying and I tried to fix this problem so
that changed self-submitting form
<form action=“<?php echo $_SERVER[‘PHP_SELF’] ?>” to
<form action=“index.php#contact” method=“POST”>

This is now good because after the form is submitted you can see messages.
Demo here: http://webinspiration.net78.net/Codepen5/index.php

However, now new problem emerged as after submitting and seeing the messages
all the links are broken, even “Contact” page. Just in case you want to return to other pages
(say “About” or “Work” page) you can’t do it. How can I change the code so that
even after submitting the form you can still navigate the site via links?

I’ve been struggling with this problem quite a while already.
As I’m beginner in this field any hint or tip where to look further would be much appreciated.
Thank you for reading this post!
Kind regards,
Signe

To simplify things, what we are dealing with here is about how to have the tabs controlled by the fragment identifier, which is the #contact part of the url.

The standard way of doing that is by giving each tab the same unique identifier as the fragment identifier.


<li><a id="about" href="#">About</a></li>
<li><a id="work" href="#">Work</a></li>
<li><a id="contact" href="#">Contact</a></li>

Then when the page is loading, you can check if the fragment identifier contains anything.


if (window.location.hash) {
    ...
}

Should anything be found in the hash, which is the fragment identifier, we can trigger the click event for that element.


document.querySelector(window.location.hash).onclick();

And thus, the fragment identifier causes the appropriate tab to be selected.

Thank you so much for taking the time to answer!
Now I have again some hope to solve the problem one day and
I know what keywords to google.
Kind regards,
Signe

Dear,
Thank you so much for helping me with this topic.
I finally found the solution via submitting the form with AJAX as changing the URL turned out to be too difficult for me.
One great tutorial how to submit a form with AJAX can be found here: http://demos.9lessons.info/contact/index.html
I used this code and it works! The result is here:
http://webinspiration.net78.net/CodepenOriginal%20Contact/
Regards, Signe