CODEWITHSUNDEEP
htmlmysqlnode.jsexpress
Nugget
Nugget

Reputation: 81

Getting form input using express then inserting to mysql database returns and inserts blank

(noob alert) Sup guys. I'm an extreme beginner and this will be my first question so I'd be grateful if someone could lend me a hand with this. I just started learning express today and I'm not sure yet where to put what but I'm pretty sure that's why this isn't working properly. It only returns message = "" and inserts a blank into the database instead of the message typed inside the textarea. Sorry for the noob question

const express = require('express')
const path = require('path')
const app = express()
const mysql = require("mysql")
const bodyParser = require('body-parser');

const connection = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "......",
    database: "chat_database"
})



app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, "public")))
app.listen(3000)

app.post('/', (req, res) => {
    const data = req.body.message
    console.log(data);

    let sql = `INSERT INTO chats(content) VALUES (?)`
    connection.query(sql, [data], (err, result) => {
        if (err) throw err
        console.log(result);
        console.log("data has been successfully inserted into the database!");
    })
})



const mainChatBlock = document.querySelector("#main-chat-block")
const mainInputArea = document.querySelector("#main-input-area")
const mainSendButton = document.querySelector("#main-send-button")

mainSendButton.addEventListener("click", () => {
    let newMessage = document.createElement("div")
    newMessage.innerHTML = mainInputArea.value
    mainChatBlock.append(newMessage)
    mainInputArea.value = ""
    mainChatBlock.scrollTop = mainChatBlock.scrollHeight
})

mainInputArea.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
    event.preventDefault();
    mainSendButton.click();
    }   
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>my chat</title>
  <link rel="stylesheet" href="css/style.css">
</head>
  <body>
    <main>
        <div id="outermost-main-div">
            <div id="outermost-chat-div">
                <div id="main-chat-area">
                    <div id="main-chat-block">

                    </div>
                </div>
                <form action="/" method="post" id="outer-input-area">
                    <textarea name="message" id="main-input-area" placeholder=">>> Enter your message here"></textarea>
                    <button type="submit" id="main-send-button">Send</button>
                </form>
            </div>
        </div>
    </main>

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

Upvotes: 0

Views: 391

Answers (1)

Nugget
Nugget

Reputation: 81

I figured it out guys. turns out the culprit was the clear value in the client side js mainInputArea.value = "" but to clear the entry, I did something like this

mainSendButton.addEventListener("click", () => {
    let newMessage = document.createElement("div")
    newMessage.innerHTML = mainInputArea.value
    mainChatBlock.append(newMessage)
    mainChatBlock.scrollTop = mainChatBlock.scrollHeight
    setTimeout(del, 100)
})
function del() {
    mainInputArea.value = ""
}

Upvotes: 1

Related Questions