Сохранить состояние
 

Прошу вашей помощи. На странице есть 2 формы, при заполнении первой по клику она скрывается и появляется вторая форма. Как мне сохранить такое состояние (видимость форм) при перезагрузке страницы или возврате на нее. Код обработчика форм:

$( document ).ready(function() {
    $("#btn_name").click(
		function(){
			sendAjaxForm('form_pass', 'form_name', 'save_user.php');
			return false; 
		}
	);
});
 
function sendAjaxForm(form_pass, form_name, url) {
    $.ajax({
        url:     url,
        type:     "POST", 
        dataType: "html", 
        data: $("#"+form_name).serialize(),  
        success: function(response) { 
        	result = $.parseJSON(response);
        	$('#form_name').hide();
                $('#form_pass').toggle();
    	},
    	error: function(response) { 
            $('#error_message').html('Error message.');
    	}
 	});
}

На клиенте можно:
- записать в куки
- записать в локальное хранилище

При чтении страницы прочитать. Если есть запись о скрытии - скрыть нужную форму.

Да, я пробовал сохранить в localstorage, но что-то никак не получается. Не могли бы вы подсказать как это сделать?

Volun, пример работы с localStorage:
https://javascript.ru/forum/misc/769...tml#post504507

Да, спасибо, уже разобрался. Вот код если кому понадобится:

$( document ).ready(function() {
    
var hideName = localStorage.getItem("hideName");
$("#form_name").css("display",hideName);
var showPass = localStorage.getItem("showPass");
$("#form_pass").css("display",showPass);

    $("#btn_name").click(
		function(){
			sendAjaxForm('form_pass', 'form_name', 'save_user.php');
			return false; 
		}
	);
});
 
function sendAjaxForm(form_pass, form_name, url) {
    $.ajax({
        url:     url,
        type:     "POST", 
        dataType: "html",
        data: $("#"+form_name).serialize(),  
        success: function(response) { 
        	result = $.parseJSON(response);
        	$('#form_name').hide();
                $('#form_pass').toggle();
                localStorage.setItem("hideName","none");
                localStorage.setItem("showPass","block");

    	},
    	error: function(response) { 
            $('#error_message').html('Error message');
    	}
 	});
}

Господа, еще такой вопрос. Как мне получить значение поля email из формы #form_name и передать его в скрытое поле hidden_email формы #form_pass ?

По форме понятно - ее ИД form_name. Так?
А, что за поле email? Это его ИД?
Показал бы фрагмент html...

Когда получишь значение из email, его нужно прописать в поле hidden_email. Это его ИД или что?
После этого вызвать отправку формы #form_pass. Это ИД той формы?

document.getElementById('form_pass').submit();

Вот код обеих форм. Они находятся на одной странице, и по клику первая скрывается, а вторая появляется без перезагрузки страницы.

<form method="post" id="form_name">
<input name="first_name" placeholder="First Name" class="form-control" data-i18n="">
<input  name="last_name" placeholder="Last Name" class="form-control" data-i18n="">
<input  name="email" placeholder="Email" class="form-control" data-i18n="">
<button type="submit" id="btn_name" class="btn-formnav btn"><span data-animation-name="next-span"><span data-i18n="">NEXT</span> &gt;</span></button>
</form><br>

<form method="post" id="form_pass">
<input name="password" placeholder="Password" class="form-control" data-i18n="">
<input  name="pass_conf" placeholder="Confirm Password" class="form-control" data-i18n="">
<input name="hidden_email" class="form-control" data-i18n="" style="display: none;">
<button type="submit" id="btn_pass" class="btn-formnav btn"><span data-animation-name="next-span"><span data-i18n="">NEXT</span> &gt;</span></button>
</form>

В скрипте пост#6 перед 10 или после 10 строки добавить

hidden_email.value = email.value;

Volun, как вариант...

<form method="post" id="form_name">
	<input name="first_name" placeholder="First Name" class="form-control" data-i18n="">
	<input  name="last_name" placeholder="Last Name" class="form-control" data-i18n="">
	<input  name="email" placeholder="Email" class="form-control" data-i18n="" value='tmp@test.ru'>
	<button type="submit" id="btn_name" class="btn-formnav btn"><span data-animation-name="next-span"><span data-i18n="">NEXT</span> &gt;</span></button>
</form>
<br>
<form method="post" id="form_pass">
	<input name="password" placeholder="Password" class="form-control" data-i18n="">
	<input  name="pass_conf" placeholder="Confirm Password" class="form-control" data-i18n="">
	<input name="hidden_email" class="form-control" data-i18n="" style="display: none;">
	<button type="submit" id="btn_pass" class="btn-formnav btn"><span data-animation-name="next-span"><span data-i18n="">NEXT</span> &gt;</span></button>
</form>
<script type='text/javascript'>
	var oi=document.querySelector('#form_name [name="email"]');
	var o=document.querySelector('#form_pass [name="hidden_email"]');
	o.value=oi.value;
	document.querySelector('#btn_pass').click();
</script>

Может посмотреть в сторону легких MVVM?

https://codepen.io/sup3rz3n/pen/jJJzyY

const { h, app } = hyperapp;
/** @jsx h */

const state = {
  form: 0,
  fields: {
    username: '',
    password: '',
    email: ''
  }
};

const actions = {
  changeForm: id => state => ({ form: id }),
  changeField: e => state => ({
    fields: {
      ...state.fields,
      [e.target.name]: e.target.value
    }
  }),
  submit: e => state => {
    e.preventDefault();
    alert(
      `submit ${state.fields.username} ${state.fields.password} ${state.fields.email}`
    )
  }
};

const view = (state, actions) => {
  if (state.form === 0) {
    console.log(state.fields.username)
    return <div>
      <input type="text" name="username" oninput={actions.changeField} value={state.fields.username} />
      <input type="password" name="password" oninput={actions.changeField} value={state.fields.password} />
      <input type="email" name="email" oninput={actions.changeField} value={state.fields.email} />
      <button onclick={() => actions.changeForm(1)} disabled={
        state.fields.username === '' ||
        state.fields.password === '' ||
        state.fields.email === ''
      }>next</button>
    </div>
  } else if (state.form === 1) {
    return <div>form2 {state.fields.username}
      <button onclick={actions.submit}>complete</button>
    </div>
  }
};

const main = app(state, actions, view, document.getElementById('app'));

ksa, спасибо, ваше решение помогло.