0

Stackoverflow に関する最初の投稿を質問にしたくありませんでしたが、コーディングは初めてで、少し助けが必要です。編集できるように、フォーム フィールドに localStorage データを入力しようとしています。私は一日中これにいました。コードを適切に投稿する方法がわからないので、ここに行きます。

「「1」のプロパティを読み取れません」というエラーがスローされ続けます。フォームに入力しましたが、「[object HTMLInputElement]」で埋められました。

$("#save").click(function (e) {
    alert("Name Has Been Saved");
    e.preventDefault();
    var data = $("#form").serializeArray();
    var id = Math.floor(Math.random() * 10000001);

    var item = {};
    item.first = ["First:", $("#first").val()];
    item.last = ["Last:", $("#last").val()];

    $.each(data, function (i, obj) {
        localStorage.setItem(id, JSON.stringify(item));

    });

});

//Fill with data from localstorage to edit
function editItem(){
    var value = localStorage.getItem(this.key);
    var item = JSON.parse(value);

    $("#form").show(function () {
        $("#userDiv").hide(function () {
        });  
    });

    $("#first").val(item.first[1]);
    $("#last").val(item.last[1]);
}

});

});


function deleteItem() {
    var ask = confirm("Are you sure you want to delete this contact?");
    if (ask) {
        localStorage.removeItem(this.key);
        alert("Contact was deleted!!");
        window.location.reload();
    } else {
        alert("Contact was NOT deleted.");
    }

}

$("#clear").click(function (e) {
    e.preventDefault();
    if(localStorage.length === 0){
        alert("There Is No Info To Clear")
    }else{
        localStorage.clear();
        alert("All Names Have Been Deleted!");
        window.location.reload();
        return false;
    }
});
});

});


<div data-role="page" id="home" data-theme="b">

    <form id="form">

        <label>First<input type="text" name="First" id="first"></label>
        <label>Last<input type="text" name="Last" id="last"></label><br>

        <input type="submit" value="Save" id="save"/>
        <input type="submit" value="Clear" id="clear"/>
        <input type="submit" value="Show" id="show"/>
        </form>
        <ul id="userDiv">
         <a href="#home" data-role="button" data-mini="true" data-inline="true">to form</a>
        </ul>


    </div>
4

0 に答える 0