Welcome

.

how can i make Update button function?

by

Questions › how can i make Update button function?
0
Vote Up
Vote Down
Garmaine asked 3 years ago

Actually , I'm trying to make an update button , once i click on it , should display the row data in the input field, and then i will edit the inputs after that i will press on submit button and the final result should be the row with the updated info that i have added . 

<body>
    <div class="container pt-5 pb-5">
        <h1 class="pb-5 pl-3 font-weight-bold">BookMark</h1>
        <hr>
        <div class="body m-auto text-center py-5">
            <h2 class="py-2">Bookmark your favorite sites</h2>
            <form class="w-75 m-auto" id="myForm">
                <div class="form-group">
                    <label for="Site_Name" class="py-2">Site Name</label>
                    <input type="text" class="form-control" id="siteName" placeholder="Bookmark Name">
                </div>
                <div class="form-group">
                    <label for="Site_URL" class="py-2">Site URL</label>
                    <input type="text" class="form-control" id="siteUrl" placeholder="website URL">
                </div>
                <button id="sub" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <div class="container mt-3">
            <div class="row shadow-none p-3 mb-5 bg-light rounded">
                <div class="col">
                    <div id="bookmarkCon"></div>
                </div>
            </div>
        </div>
        <hr>
        <div class="footer">
            <p>&copy;2019 Bookmarker Inc.</p>
        </div>
    </div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
</body>
//Javascript
var bookMname = document.getElementById("siteName");
var bookUrl = document.getElementById("siteUrl");
var btn = document.getElementById("sub");
var bookMarks;

if (localStorage.getItem("BookStorage") == null) {
    bookMarks = [];
}

else {
    bookMarks = JSON.parse(localStorage.getItem("BookStorage"));
    displayData();
}



btn.onclick = function () {
    addBookMark();
    displayData();
    reset();

}

function addBookMark() {

    if (bookMname.value != "" && bookUrl.value != "") {
        var bookMark = {
            bookMarkName: bookMname.value,
            url: bookUrl.value,
        }

        bookMarks.push(bookMark);
        localStorage.setItem("BookStorage", JSON.stringify(bookMarks))
    }
    else {
        alert("Please fill the empty fields");
    }


}


function displayData() {

    /**local var */
    var data = "";

    for (var i = 0; i < bookMarks.length; i++) {

        data += "<div><span class='mr-5 font-weight-bold h1 text-uppercase'>" + bookMarks[i].bookMarkName + "  " + "</span><span>" + ' <a class="btn btn-primary mr-4" target="_blank" href="' + bookMarks[i].url + '">Visit</a> ' + "</span><span>" + '<a class="btn btn-danger mr-4" href="#" onclick="handleDelete(' + i + ');">Delete</a> ' + "</span> <span>" + '<a class="btn btn-info mr-4" href="#" onclick="Update()">Update</a> ' + "</span></div>"

    }

    document.getElementById("bookmarkCon").innerHTML = data;
}

function reset() {
    document.getElementById("myForm").reset();

}

function handleDelete(index) {
    bookMarks.splice(index, 1);
    localStorage.setItem("BookStorage", JSON.stringify(bookMarks));
    displayData();
}

// update button

function Update() {
    for (var i = 0; i < bookMarks.length; i++) {



    }

}

your help is highly appreciated , if it possible make it with a simple way , as i'm a i'm a beginner in java script. thnaks in advance