Блог

Я новичок в javascript, и у меня возникли некоторые проблемы с хранением данных в локальном хранилище. Я хочу сохранить данные формы в объекте JSON, чтобы записи добавлялись в массив объектов и могли быть сохранены в локальном хранилище. Но каждый раз, когда журнал отображает ошибку при получении значения элемента выбора. Вот код:

 home.html

<form id="form" onsubmit="submit();">
    <h3 align="center" >Contact Form</h3>

    <table align="center" cellspacing="3dp" cellpadding="20dp">
        <tr>
            <td><label>Name:</label></td>
            <td><input type="text" required align="center" size="20dp" id="name"></td>
        </tr>
        <tr>
            <td><label>Email:</label></td>
            <td><input type="email" required align="center" size="20dp" id="email"></td>
        </tr>
        <tr>
            <td><label>Contact No.:</label></td>
            <td><input type="text" required align="center" size="20dp" id="contact"></td>
        </tr>
        <tr>
            <td><label>Gender:</label></td>
            <td><select name="gender" id="gender">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="other">Other</option>
            </select></td>
        </tr>
        <tr>
            <td><label>Comments</label></td>
            <td><textarea id="comment"></textarea></td>
        </tr>
        <tr><td><br></td></tr>
        <tr>
            <td><input type="submit" value="Submit" align="center"> </td>
        </tr>
    </table>
</form>
  

и js:

 main.js
function submit()
{
var myData = JSON.parse(localStorage.getItem('records'))||[];
var newData =
[{
    'name': document.getElementById("name"),
    'email': document.getElementById("email"),
    'contact': document.getElementById("contact"),
    'gender': document.getElementById("gender"),
    'comment':document.getElementById("comment")
}];
myData.push(newData);
localStorage.setItem("records", JSON.stringify(myData));

var newData1 = JSON.parse(localStorage.getItem("records"));
  

Есть предложения?

Я думаю, вы хотели бы взглянуть на эту обновленную скрипку

проблема с вашим кодом заключается в том, что вы сохраняете DOM elements в объекте, а не в значении elements

я изменил эту функцию

 var newData =
[{
    'name': document.getElementById("name").value,
    'email': document.getElementById("email").value,
    'contact': document.getElementById("contact").value,
    'gender': document.getElementById("gender").value,
    'comment':document.getElementById("comment").value
}];