Использовать изображение в качестве гиперссылки и сохранить значение ввода текстового поля?

Question

На моем веб-сайте есть текстовое поле, которое я использую, чтобы спросить у пользователя его имя. Ниже у меня есть 2 изображения: кнопка «Отмена», представляющая собой просто изображение с тегом для возврата к индексу, и изображение Go, которое связано с другой страницей HTML, на которой вводится текст поле будет использоваться для заполнения абзаца. Эта страница связана ниже:

Я в порядке с тем, как работает изображение отмены, но могу ли я использовать изображение Go перенести меня на мою другую страницу HTML, а также сохранить введенные данные в текстовое поле "ваше имя"?

<div class="name_input_box">
    <input type="text" placeholder="Your name" id="name" required />
    <label for="name" class="label_name">
    </label>
</div>

мой код для поля ввода ^

 <a href="Add_page.html">
        <img src="assets/Go_button.png" img style="height:35%; width:35%;">
        </a>

Мой код для изображения "go" ^

Я понимаю, что это может показаться простым, но я не могу найти видеоуроков о том, как справиться с этим, большое спасибо всем, кто нашел время, чтобы помочь я в пасхальное воскресенье :) 1016

Answer 1

Если я хорошо понимаю ваши вопросы, думаю, это то, что вы ищете. Локальное хранилище хранит ваши данные для вас, и вы можете получить ваши данные в любое время, когда вам это нужно. Попробуйте связать этот скрипт с вашим кодом html и ссылаться на правильные идентификаторы.

// get data from the input tag/local storage value
var input_data = document.getElementById('input_data').value

//local storage key
var key_name = 'UserName';

// paragraph to fill input  ..you can p tag for this  
var result_screen = document.getElementById('result_screen')

// image link / button
var goBtn = document.getElementById('goBtn');

goBtn.onclick = function () {

    // To check for empty input value 
    if (key_name && value) {
        localStorage.setItem(key_name, input_data);
        location.reload();
    }

}

// loop through the input value entered by users 

for (var i = 0; i < localStorage.length; i++) {
    var key_name = localStorage.key_name(i);
    var input_data = localStorage.getItem(key_name);

    result_screen.innerHTML += `${key_name}: ${value}<br>`;
}

Answer 2

Либо используйте localStorage, либо просто создайте форму

<form action="Add_page.html">
  <div class="name_input_box">
    <label for="name" class="label_name"><input type="text" placeholder="Your name" name="name" required /></label>
    <input type="image" src="assets/Go_button.png" img style="height:35%; width:35%;">
  </div>
</form>

и используйте location.search для получения имени.