I'm trying to create my own TODO-WEB-APP.
I am trying to add delete feature to my app.
I am using get a request from server.js, and pass (by res.render) array of tasks to the hbs file.
Now, after I got the data from server.js I display it in the hbs file, then I want to allow the user the option to choose the task he wants to delete.
my problem is that I just don't know how I can get this data back from the hbs, once the user chooses the task to delete.
The code in server.js (the request):
/*All tasks*/ app.get('/allTasks',(req,res)=>{ //get (go to) the allTasks (hbs file) Todo.find().then((todos) => { //console.log(todos); var arrayOfTodos = []; var missionIndex = 0; todos.forEach(function(element){ //console.log("\n\n\n\n\n elemnt details: ",element.text + "\n",element.completed+"\n"); missionIndex = missionIndex + 1; var addToArrayJson = { text: element.text, completed: element.completed, missionNumber: missionIndex } arrayOfTodos.push(addToArrayJson); console.log("ff\n\n", addToArrayJson); }); res.render("allTasks.hbs", { pageTitle: "All tasks: ", todos: arrayOfTodos }); console.log("\n\n\n\n\n\n\ is::: \n\n\n\n\n",arrayOfTodos); }); console.log("req is: \n\n\n", req); }); The code in the hbs file:
<form id="delete"> <input value="Delete" type="submit"> </form> <select id = "chooseDelete" form="delete"> <option> Choose task to delete</option> {{#each todos}} <option>{{missionNumber}}</option> {{/each}} </select> in this way, I got the value in the address line, but I don't know how to grab it and send it to the server.js.
in this way:
<p id="demo"></p> <button id="deleteButton">Delete</button> <script> deleteButton.addEventListener("click", function(){ document.getElementById("demo").innerHTML = document.getElementById("chooseDelete").value; }); </script> I just get the value in: document.getElementById("chooseDelete").value; But again, I don't know how to pass it back to the server.
[You can see this pic][1]
please help me if you can.
