Seen from the attached image, the page has a tab menu. After filling in the information on the tab 1, then going to fill in tab 2. After completing to fill tab2, the content is lost on the tab1, because page refreshed after fill in tab2
My question is how to keep content stay on tab1 after filling in tab2?
UPDATE
If page isn't refresh after filling in tab2, the content will stay on tab1. However, the page refresh is required in the code for some reason.
The trick is to have both HTML on 1 single page, that doesn't refresh. You can just hide the ones that are not shown, and display the one that is, and the filled in content will stay the same.
If you really want to do it with some kind of refresh, you should save all the data in a cookie (with JavaScript) when you go to the next page and read it out on the next page.
Of course there are more solutions, and to get more specific, we need to know more about how the page is build-up.
Ok, since you mentioned (and apparently i didn't see that part) that the page is refreshed, you are dealing with a multi-stage form.
if you have control of the server-side (i assume you do since you tagged PHP), what you do when you click next (or next tab), store the data of the tab you are leaving in a session variable, preferrably in "parts" like, $_SESSION['form']['part1']
for easy access. as you proceed with the form, you append to the $_SESSION['form']
in parts. when you try to access back, you check out that part if it has data pertaining to the fields in that tab
$_SESSION['mytabs'] = array(
'tab1' => array (
'field1' => 'value1,
'field2' => 'value2,
'field3' => 'value3
),
'tab2' => array (
'field1' => 'value1,
'field2' => 'value2,
'field3' => 'value3
),
);