javascript - Adding list items from prompt and save them after page reload

View Original

I am helping a friend with a website that they are trying to make and I am trying to add an admin button that will allow them to click the button to add/delete the car description, picture, and price. I also need them to stay on the page after the page reloads. What is the best way of going about this?

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="test.css" rel="stylesheet">
    <title>Cars</title>
</head>

<body>
    <h1>Items</h1>

    <ul id="items">

        <li><span>Delete</span></li>
        
    </ul>
    
    <button type="button" id="add-item">Add item</button>

    <script src="test.js"></script>
</body>

</html>

ul {
    padding: 0px;
}

li {
    display: flex;
    background-color: #eee;
    margin: 5px;
    padding: 5px;
    align-items: center;
}

li > span {
    margin-left: auto;
    background-color: #aaa;
    padding: 5px;
    cursor: pointer;
}

let addButton = document.getElementById("add-item");

const curIndex = 0;

addButton.addEventListener("click", function() {
     // Retrieves the 'list'
     let list = document.getElementById("items");
     let textNode = window.prompt("Enter item:");
     if (textNode != null) {
         let item = document.createElement("li");
         //Creates a textnode from the users input
         item.appendChild(document.createTextNode(textNode));
         //Adds the users textnode at the end of the list
         list.appendChild(item);
         // Creates a delete button 
         let deleteButton = document.createElement("span");
         deleteButton.innerHTML = "Delete"
         item.appendChild(deleteButton)
     }
});

Answer

Solution:

One

It looks like you are trying to maintain a list on the browser where the user can add and delete the items. In which case you need to use a form and a submit button which will execute the PHP file again (or a different file as required). At that point in the server, you can save it to the database or file.

Two

If you are trying to save each entry as it's added, then you need to abandon your whole javascript code. And provide a form with an input and an add-button. This will submit the form and you can save the entry.

For delete to work, you need to populate the form with all the saved values and have a button next to each value to delete that value. Each button needs to have a unique id/name so that you can detect which item you want to delete.

There are other ways of doing it too.

Source