diff --git a/index.js b/index.js index 3a3a755..5f0a4ca 100644 --- a/index.js +++ b/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(`

ID: ${id}
Название: ${title}
Дата: ${date}
Описание: ${description}

`); }); // UPDATE `blog`.`posts` SET `description` = 'gfhj' WHERE (`id` = '10'); diff --git a/public/css/style.css b/public/css/style.css index 7702929..a02d904 100644 --- a/public/css/style.css +++ b/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; diff --git a/public/js/script.js b/public/js/script.js index ce16a43..67f22ef 100644 --- a/public/js/script.js +++ b/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'); - const id = e.target.getAttribute('data-id'); + idInput.setAttribute('name', 'id'); // post запрос id изменяемой записи + idInput.setAttribute('value', id); // value id изменяемой записи + modal.style.display = 'flex'; // показать модальное окно - form.elements[0].setAttribute('name', 'id'); // post запрос id изменяемой записи - form.elements[0].setAttribute('value', id); // value id изменяемой записи - - console.log(form.elements[0]); - form.setAttribute('action', '/update'); + btnSend.addEventListener('click', (e) => { + let idInputValue = idInput.value; + + if (!isNaN(idInputValue) == false) { + 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'; }); } diff --git a/views/assets/update-form.pug b/views/assets/update-form.pug index 3f987c2..4f49644 100644 --- a/views/assets/update-form.pug +++ b/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") - input(type="text" value="id" placeholder="ID изменяемой записи") - input(type="text" name="title" placeholder="Название") - input(type="text" name="date" placeholder="Дата") - textarea(type="text" name="description" placeholder="Описание") + form(action="/update" method="POST") + label(for="id") ID изменяемой записи + input(id="id" type="text" value="id" required) + label(for="title") Название + 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-danger btn-close") Закрыть окно \ No newline at end of file + button(class="button-primary btn-send" type="submit") Принять + button(class="button-danger btn-close") Закрыть окно \ No newline at end of file