project/form.html at master · CodigoPensador92/project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>

<html lang="ru">

<head>
  <title>Финансовый план</title>
  <meta charset="UTF-8" />
  <meta name="Автор" content="Балина Дарья">
  <script src="scripts/script.js"></script>
  <style>
    form {
      /* Форма по центру */
      margin: 0 auto;
      width: 400px;
      /* Контур формы */
      padding: 1em;
      border: 1px solid #cccccc;
      border-radius: 1em;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    form li + li {
      margin-top: 1em;
      list-style-type: none;
    }

    .button {
      padding-left: 90px;
    }
  </style>
</head>

<body>
<h1>Заполни форму и получи первые шаги к финансовой независимости</h1>

<form action="/my-handling-form-page" method="post" class="form" id="form_save_local">
  <ul>
    <li>
      <label for="name">Имя:</label>
      <input type="text" id="name" name="user_name">
    </li>
    <li>
      <label for="mail">E-mail</label>
      <input type="email" id="mail" name="user_mail">
    </li>

    <li class="button">
      <button type="submit">Отправить</button>
      <button type="button" id="button_load_prevData">Загрузить предыдущие данные</button>
    </li>
  </ul>
</form>

<script>
  const loadPrevDataButton = document.querySelector('#button_load_prevData')

  loadPrevDataButton.addEventListener('click', function (event) {
    event.preventDefault()
    const prevSavedData = getDataFromLocal('my-handling-form-page') || {}

    if (prevSavedData.user_name) {
      document.querySelector('#name').value = prevSavedData.user_name
    }

    if (prevSavedData.user_mail) {
      document.querySelector('#mail').value = prevSavedData.user_mail
    }
  })

  const form = document.querySelector('#form_save_local')

  /**
   * @see https://learn.javascript.ru/introduction-browser-events#addeventlistener
   */
  form.addEventListener('submit', function (event) {
    // не отправляем форму через POST-запрос
    event.preventDefault()

    /**
     * @see https://learn.javascript.ru/formdata#metody-obekta-formdata
     * @type {FormData}
     */
    const formDataRaw = new FormData(form)
    console.log('formDataRaw: ', formDataRaw) // eslint-disable-line

    let formData = {}

    for (let [name, value] of formDataRaw) {
      formData[name] = value
    }

    console.log('formData: ', formData) // eslint-disable-line

    saveDataToLocal(formData, 'my-handling-form-page')
  })


</script>

</body>

</html>