Отправка входных данных 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 27 Окт 2019 в 22:18

2

Во-первых, нет элемента с name в качестве идентификатора.

–

Alain Cruz

27 Окт 2019 в 22:22

1

Для двух вы должны проверять typeof localStorage, а не Storage.

–

Scott Marcus

27 Окт 2019 в 22:24

Я подумал, что где "name" будет идентификатором? Если нет, то как должно быть?

–

mskw

27 Окт 2019 в 22:27

О да, я понял. мне нужен идентификатор = "имя". спасибо друзья

–

mskw

27 Окт 2019 в 22:29

3

Но совет: никогда ничего не называйте name, поскольку name является глобальным свойством, и вы можете перезаписать его своими собственными переменными.

–

Scott Marcus

27 Окт 2019 в 22:34

Answer

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

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

https://jsfiddle.net/jcgodLt6/1/

Фрагмент SO (здесь для справки):

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>

1

Moob 27 Окт 2019 в 23:23

Question 2

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

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

https://jsfiddle.net/jcgodLt6/1/

Фрагмент SO (здесь для справки):

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>

1

Moob 27 Окт 2019 в 23:23

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

1 ответ

Похожие вопросы

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

javascript