3 tabbed login form validating ...

Hello:

I have a 3 tabbed user form where one tab is for "registering", another tab for "login" and a third tab for "forgot". The default is "login" and for the most part that all works fine. My problem is that when the user clicks 1 of the other tabs, say "register", and fills in the information and clicks "submit", the page seems to refresh and jump back to the default, which is login. I get why it is doing that because the default radio button is setup that way. How do I stay on that page and ensure it has done proper validating individually? I know I can create 3 individual pages, but I am trying to make it as efficient as possible and this seems logical. I have tried using "sessions" but everything is so bloated. Is there a simple way to do this validating on "current" tab? Ajax? Javascript? JQuery? I have tried for 2 weeks now and am almost defeated.

https://codepen.io/lepew/pen/pPQWQG

 

Hi
I'm afraid using SESSION is the most reliable way. Just allow your server script to redirect page to proper tab. Another problem to add is when you see the page in different type of browser, say Chrome or IE and then try refresh (F5 shortcut key) page. Firefox is capable to retain tab but not those other two. Correct?

This means having only 1 form wrapping whole div.sign_Area (instead of 3 different forms) so it can detect input[name="tabGroup1"], save this tab state as say... $_SESSION['tab'] ... and based on that put checkmark back to the right input[name="tabGroup1"].

This doesn't seem so bloated

 

I'd rather go with AJAX instead of the actual form submission, page reloads and defaults (form fields, tabs).