Added check number in field id

index.js

@@ -78,6 +78,17 @@ app.post('/update', (req, res) => {
           date = req.body.date,
           description = req.body.description;
 
+    const data = {
+        id: req.body.id,
+        title: req.body.title,
+        date: req.body.date,
+        description: req.body.description
+    };
+    
+    for (let k in data) {
+        console.log(k + ' : ' + data[k]);
+    }
+
     res.send(`<p>ID: ${id}<br>Название: ${title}<br>Дата: ${date}<br>Описание: ${description}</p>`);
 });
 // UPDATE `blog`.`posts` SET `description` = 'gfhj' WHERE (`id` = '10');

public/css/style.css

@@ -12,6 +12,23 @@ textarea {
     resize: none;
     margin-top: 5px;
 }
+label {
+    padding-left: 5px;
+}
+input[type="date"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    display: block;
+    width: 100%;
+    padding: 10px;
+    line-height: 20px;
+    font-size: 16px;
+    font-weight: inherit;
+    background: #fff;
+    border-radius: 5px;
+    border: 1px solid #bdbdbd;
+}
 .container {
     max-width: 1100px !important;
     padding-left: 15px !important;

public/js/script.js

@@ -1,24 +1,37 @@
 function updatePost() {
     const modal = document.querySelector('.modal-mask'),
           btnShowModal = document.querySelectorAll('.update-post'),
-          btnClose = document.querySelector('.btn-close');
+          btnClose = document.querySelector('.btn-close'),
+          form = modal.querySelector('form');
     
     btnShowModal.forEach(btn => {
         btn.addEventListener('click', (e) => {
-            modal.style.display = 'flex';
+            const btnSend = modal.querySelector('.btn-send');
+                  id = e.target.getAttribute('data-id'),
+                  idInput = modal.querySelector('#id');
 
-            const form = modal.querySelector('form');
+            idInput.setAttribute('name', 'id'); // post запрос id изменяемой записи
-            const id = e.target.getAttribute('data-id');
+            idInput.setAttribute('value', id); // value id изменяемой записи
+            modal.style.display = 'flex'; // показать модальное окно
 
-            form.elements[0].setAttribute('name', 'id'); // post запрос id изменяемой записи
+            btnSend.addEventListener('click', (e) => {
-            form.elements[0].setAttribute('value', id); // value id изменяемой записи
+                let idInputValue = idInput.value;
-
+                
-            console.log(form.elements[0]);
+                if (!isNaN(idInputValue) == false) {
-            form.setAttribute('action', '/update');
+                    alert('Поле ID должен быть числом!');
+                    e.preventDefault();                    
+                } else {
+                    idInputValue = idInputValue.trim();
+                }
+            });
         });
     });
 
-    btnClose.addEventListener('click', () => {
+    btnClose.addEventListener('click', (e) => {
+        e.preventDefault();
+        for (let i = 1; i < 4; i++) {
+            form.elements[i].value = '';
+        }
         modal.style.display = 'none';
     });
 }

views/assets/update-form.pug

@@ -3,11 +3,15 @@ div(class="modal-mask")
         div(class="modal-head")
             p(class="modal-title") Изменить запись
         div(class="modal-body")
-            form(action="#" method="POST")
+            form(action="/update" method="POST")
-                input(type="text" value="id" placeholder="ID изменяемой записи")
+                label(for="id") ID изменяемой записи
-                input(type="text" name="title" placeholder="Название")
+                input(id="id" type="text" value="id" required)
-                input(type="text" name="date" placeholder="Дата")
+                label(for="title") Название
-                textarea(type="text" name="description" placeholder="Описание")
+                input(id="title" type="text" name="title" placeholder="Запись" required)
+                label(for="date") Дата
+                input(id="date" type="date" name="date" required)
+                label(for="description") Описание
+                textarea(id="description" type="text" name="description" placeholder="Описание" required)
                 div(class="modal-footer")
-                    button(class="button-primary") Принять
+                    button(class="button-primary btn-send" type="submit") Принять
-            button(class="button-danger btn-close") Закрыть окно
+                    button(class="button-danger btn-close") Закрыть окно