Отправка входных данных HTML-формы в функцию Javascript для локального хранения

Question 1

Попытка получить данные формы в JavaScript. Я не уверен, почему это не работает.

<!DOCTYPE html>
<html>
<body>

    <form action="site2.html" onsubmit="store()">
        Enter your name: <input type="text" name="name" />
        Enter your age: <input type="text" name="age" />
        <input type="submit" />
        </form>



<!-- <div id="result"></div> -->

<script>
    function store() {
        // Check browser support
        if (typeof(Storage) !== "undefined") {
        var s = document.getElementById("name").value;
        localStorage.setItem("lastname", s);
        }
    }
</script>

</body>
</html>

javascript html

0

mskw

Answer

Это не будет работать в этом фрагменте, потому что localStorage запрещен в изолированной области. Код здесь только для справки. Вы можете увидеть, как он работает в этом jsFiddle . Если вы отправите форму и обновите / повторно запустите страницу, вы увидите, что она даже устанавливает значения ввода из localStorage. Кроме того, это будет работать с любыми полями, существующими в форме. Добавьте еще несколько входов, чтобы увидеть, как это работает. (Убедитесь, что вы дали им имя )

Работающий jsFiddle (при условии, что ваш браузер поддерживает localStorage):

SO Snippet (здесь для справки):

var form = document.getElementById("myform");
form.addEventListener("submit", store, false);

function store(e){
e.preventDefault();//prevent submission
  var inputs = form.elements;
  for (let i = 0; i < inputs.length; i++) {
    localStorage.setItem(inputs[i].name, inputs[i].value);
    console.log(inputs[i].name, inputs[i].value);
  }
}

function retrieve(){
  var inputs = form.elements;
  for (let i = 0; i < inputs.length; i++) {
    inputs[i].value = localStorage.getItem(inputs[i].name);
    console.log(inputs[i].value);
  }
}

retrieve();

  <form action="site2.html" onsubmit="store()">
        Enter your name: <input type="text" name="name" />
        Enter your age: <input type="text" name="age" />
        Fave thing: <select name="fave"><option>Bees</option><option>Jam</option></select>
        <input type="submit" value="submit" />
        </form>

Question 2

Это не будет работать в этом фрагменте, потому что localStorage запрещен в изолированной области. Код здесь только для справки. Вы можете увидеть, как он работает в этом jsFiddle . Если вы отправите форму и обновите / повторно запустите страницу, вы увидите, что она даже устанавливает значения ввода из localStorage. Кроме того, это будет работать с любыми полями, существующими в форме. Добавьте еще несколько входов, чтобы увидеть, как это работает. (Убедитесь, что вы дали им имя )

Работающий jsFiddle (при условии, что ваш браузер поддерживает localStorage):

SO Snippet (здесь для справки):

var form = document.getElementById("myform");
form.addEventListener("submit", store, false);

function store(e){
e.preventDefault();//prevent submission
  var inputs = form.elements;
  for (let i = 0; i < inputs.length; i++) {
    localStorage.setItem(inputs[i].name, inputs[i].value);
    console.log(inputs[i].name, inputs[i].value);
  }
}

function retrieve(){
  var inputs = form.elements;
  for (let i = 0; i < inputs.length; i++) {
    inputs[i].value = localStorage.getItem(inputs[i].name);
    console.log(inputs[i].value);
  }
}

retrieve();

  <form action="site2.html" onsubmit="store()">
        Enter your name: <input type="text" name="name" />
        Enter your age: <input type="text" name="age" />
        Fave thing: <select name="fave"><option>Bees</option><option>Jam</option></select>
        <input type="submit" value="submit" />
        </form>

Отправка входных данных HTML-формы в функцию Javascript для локального хранения

1 ответ

Новые вопросы

javascript