Javascript-форум - Ввод данных в input вместо всплывающего окна браузера

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Ввод данных в input вместо всплывающего окна браузера (https://javascript.ru/forum/misc/78118-vvod-dannykh-v-input-vmesto-vsplyvayushhego-okna-brauzera.html)

Ввод данных в input вместо всплывающего окна браузера

Здравствуйте. Имеется JS код, который запоминает в куках браузера имя посетителя, и выводит его при последующих заходах, код рабочий, но здесь нужно указывать имя во всплывающем окне браузера, мне же нужно, чтобы вместо окна на странице были 2 input поля с кнопкой, куда посетитель будет вводить свои имя и фамилию. Помогите, пожалуйста исправить данный код.

function set_cookie ( name, value, expires_year, expires_month, expires_day, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );
 
  if ( expires_year )
  {
    var expires = new Date ( expires_year, expires_month, expires_day );
    cookie_string += "; expires=" + expires.toGMTString();
  }
 
  if ( path )
    cookie_string += "; path=" + escape ( path );
 
  if ( domain )
    cookie_string += "; domain=" + escape ( domain );
 
  if ( secure )
    cookie_string += "; secure";
 
  document.cookie = cookie_string;
 
}
 
function delete_cookie ( cookie_name )
{
  var cookie_date = new Date ( );  //Текущая дата и время
  cookie_date.setTime ( cookie_date.getTime() - 1 );
  document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}
 
function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
 
  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}
 
if ( ! get_cookie ( "username" ) )
{
  var username = prompt ( "Пожалуйста, ведите Ваше имя", "" );
 
  if ( username )
  {
    var current_date = new Date;
    var cookie_year = current_date.getFullYear ( ) + 1;
    var cookie_month = current_date.getMonth ( );
    var cookie_day = current_date.getDate ( );
    set_cookie ( "username", username, cookie_year, cookie_month, cookie_day );
    document.location.reload( );
  }
}
else
{
  var username = get_cookie ( "username" );
  document.write ( "Привет, " + username + ", добро пожаловать на сайт!" );
  document.write ( "<br><a href=\"javascript:delete_cookie('username'); document.location.reload( );\">Забудь обо мне!</a>" );
}

Цитата:

Сообщение от Lefseq

мне же нужно, чтобы вместо окна на странице были 2 input поля с кнопкой, куда посетитель будет вводить свои имя и фамилию

После загрузки страницы прочитай данные из куки и запиши их в свои поля...

Цитата:

Сообщение от Lefseq

Помогите, пожалуйста исправить данный код.

Не всякий код нужно править. Бывает лучше написать другой вариант скрипта. Это выходит дешевле... ;)

Цитата:

Сообщение от ksa

После загрузки страницы прочитай данные из куки и запиши их в свои поля...

Можешь на примере показать? Я не силен в JS

<section id="user-greeting">
	<form>
		<label>
			Имя
			<input type="text" autocomplete="name" name="name" required>
		</label>
		<label>
			Фамилия
			<input type="text" autocomplete="family-name" name="family-name" required>
		</label>
		<button>Запомнить</button>
	</form>
	<section>
		Привет, <span class="name"></span>, добро пожаловать на сайт!
		<button id="user-greeting-forget-button">Забудь обо мне!</button>
	</section>
</section>
<script>
	(function main() {
		var form = document.querySelector("#user-greeting > form");
		var section = document.querySelector("#user-greeting > section");
		
		function changeView() {
			if ("name" in localStorage) {
				form.style.display = "none";
				section.style.display = "";
				document.querySelector("#user-greeting .name").textContent = localStorage.name;
			} else {
				section.style.display = "none";
				form.style.display = "";
			}
		}
		
		form.addEventListener("submit", function(event) {
			event.preventDefault();
			var data = new FormData(form);
			localStorage.name = [data.get("name"), data.get("family-name")].join(" ");
			changeView();
		});
		
		document.getElementById("user-greeting-forget-button").addEventListener("click", function() {
			delete localStorage.name;
			changeView();
		});
		
		changeView();
	})();
</script>

Malleys,
Спасибо большое

Malleys,
Код рабочий, но нужно кое что исправить. Буду признателен, если поможете.

1. Нужно убрать на страницах кнопку/функцию "Забудь обо мне!"
2. Надо чтобы введенные пользователем имя (name) и фамилия (family-name) выводились на странице page2.html по отдельности, чтобы можно было поставить их в разные части страницы.

<section id="user-greeting">
    <form>
        <label>
            Имя
            <input type="text" autocomplete="name" name="name" required>
        </label>
        <label>
            Фамилия
            <input type="text" autocomplete="family-name" name="family-name" required>
        </label>
        <button onclick="location.href='https://site.ru/page2.html'">Запомнить</button>
    </form>
    <section>
        Привет, <span class="name"></span>, добро пожаловать на сайт!
        <button id="user-greeting-forget-button">Забудь обо мне!</button>
    </section>
</section>

(function main() {
        var form = document.querySelector("#user-greeting > form");
        var section = document.querySelector("#user-greeting > section");
        
        function changeView() {
            if ("name" in localStorage) {
                form.style.display = "none";
                section.style.display = "";
                document.querySelector("#user-greeting .name").textContent = localStorage.name;
            } else {
                section.style.display = "none";
                form.style.display = "";
            }
        }
        
        form.addEventListener("submit", function(event) {
            event.preventDefault();
            var data = new FormData(form);
            localStorage.name = [data.get("name"), data.get("family-name")].join(" ");
            changeView();
        });
        
        document.getElementById("user-greeting-forget-button").addEventListener("click", function() {
            delete localStorage.name;
            changeView();
        });
        
        changeView();
    })();