HTML , JavaCript , чего не хватает в коде , что я сделал не так?
эти коды позволяют отправлять данные из формы на вторую страницу , по идее всё должно работать , потому что мне эти коды дали очень умные люди , но почему то данные не отправляются , я посмотрел в коде элемента и там ошибки Uncaught TypeError: Cannot read properties of null (reading 'reduce') и такая же ошибка на втором коде TypeError: Cannot read properties of null (reading 'appendChild') . Я думаю что я забыл просто что то написать в коде , может id где то забыл или ещё что то . Вот весь код
Первый код:
forming.html
<fieldset >
<form action="myforming.html">
<legend>Sign Up Form</legend>
<label>Email:<br />
<input type="text" name="email" id="email"/></label><br />
<label>Password<br />
<input type="text" name="password" id="password"/></label>
<label>Mobile:<br />
<input type="text" name="mobile" id="mobile"/></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" id="telephone"/></label>
<input type="submit" value="Submit" onclick="getData()">
</form>
</fieldset>
<script>
// Где myForm это id формы
const formElement = document.getElementById('myForm');
function getData() {
const form = new FormData(formElement);
const addedData = {};
for (let [key, value] of form) addedData[key] = value;
listForm.push(addedData);
localStorage.setItem("list", JSON.stringify(listForm));
};
</script> myforming.html
<body>
The Email is equal to: <span id="data"> Email</span>
The Password is equal to <span id="data1"> Password</span>
The Mobile is equal to <span id="data2"> Mobile</span>
The Telephone is equal to <span id="data3"> Telephone</span>
<script>
// Вытаскиваем значения из хранилища
const list = JSON.parse(localStorage.getItem('list'));
// Собираем все значения в строку для отрисовки и записываем в нужный контейнер
document.getElementById('cont').innerHTML = list.reduce((acc, it) => {
return acc += `The Email is equal to: <span id="data">${it.email}</span>
The Password is equal to <span id="data1">${it.password}</span>
The Mobile is equal to <span id="data2">${it.mobile}</span>
The Telephone is equal to <span id="data3">${it.telephone}</span>
`
}, '');
</script>
</body> Скрипт 2 кода
forming.html
function getData() {
//getting the values
var email = document.getElementById("email").value;
var password= document.getElementById("password").value;
var telephone= document.getElementById("telephone").value;
var mobile= document.getElementById("mobile").value;
//saving the values in local storage
var users = JSON.parse(localStorage.getItem('users')) || [];
users.push({ email, password, telephone, mobile });
localStorage.setItem("users", JSON.stringify(users));
}
myforming.html
window.onload = function() {
var users = JSON.parse(localStorage.getItem('users')) || [];
var dataField = document.getElementById('data-field');
users.forEach(function(user) {
var paragraph = document.createElement('p');
paragraph.innerHTML = 'Email: ' + user.email + ', password: ' + user.password+ ', telephone: ' + user.telephone + ', mobile: '+user.mobile;
dataField.appendChild(paragraph);
});
}
ты нарушил первое правило офтальмолога ты забыл приписать запятую в пятой строке
// Где myForm это id формы
Ну и где у тебя то id прописано?
А localStorage от таких "разовых" данных неплохо было бы чистить
В таком примере, новая страница откроется с параметрами запроса после "myforming.html?email=...". И весь этот код можно отремонтировать одной кнопкой "Delete".
А на второй странице получить все данные одной строкой:
const params = (new URL(document.location)).searchParams или "document.baseURI"
Если есть решимость шифрования персональных данных из формы, то их можно передать в URL. Шифрование это отдельная задача
например:
файл отправки
<h1>Первая форма</h1>
<form id="myForm" action="form2.html">
<!-- Ваша форма -->
<input type="text" name="email" id="email"/>
<input type="text" name="password" id="password"/>
<!-- Другие поля -->
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
const form = new FormData(this);
const queryString = new URLSearchParams(form).toString(); // Преобразовать данные в строку запроса
window.location.href = 'form2.html?' + queryString; // Перенаправить пользователя на form2.html с данными в URL
});
</script>
файл приемки
<h1>Вторая форма</h1>
<form id="myForm">
<!-- Ваши поля формы -->
<input type="text" name="email" id="email"/>
<input type="text" name="password" id="password"/>
<!-- Другие поля -->
</form>
<script>
const urlParams = new URLSearchParams(window.location.search);
const email = urlParams.get('email');
const password = urlParams.get('password');
// Заполнить поля формы значениями из параметров запроса
document.getElementById('email').value = email;
document.getElementById('password').value = password;
// Заполнить другие поля формы, если они есть
</script>
можно передавать значения в скрытые полях в формы.localStorage-не самая лучшая практика