Я пытаюсь создать собственное приложение TODO-WEB-APP.
Я пытаюсь добавить функцию удаления в свое приложение.
Я использую запрос от server.jsи передать (с помощью res.render) массив задач в файл hbs.
Теперь, после того как я получил данные из server.js, я отображаю их в файле hbs, затем я хочу разрешить пользователювозможность выбрать задачу, которую он хочет удалить.
моя проблема в том, что я просто не знаю, как получить эти данные из hbs, как только пользователь выберет задачу для удаления.
код в server.js (запрос):
/*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);
});
код в файле hbs:
<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>
таким образом, я получил значение в адресной строке, но я не знаю, как захватить его и отправить его на server.js.
таким образом:
<p id="demo"></p>
<button id="deleteButton">Delete</button>
<script>
deleteButton.addEventListener("click", function(){
document.getElementById("demo").innerHTML = document.getElementById("chooseDelete").value;
});
</script>
Я просто получаю значение в: document.getElementById("chooseDelete").value; Ноопять же, я не знаю, как передать его обратно на сервер.
[Вы можете видеть это изображение] [1]
, пожалуйста, помогите мне, если можете.