So my goal is, right now, to use NodeJS and express together to take the data I get from a form and write it to a local file. The local file is located on my computer i.e. the server (since I am using localhost). Now, I am able to render the form, but how do I add functionality to this form? Because whenever I create an index.js file in the views folder, the html is not able to access it until and until and unless I dont move it to a public folder, which is the static files folder, the html cant access the js file. Now, when I transfer it to the statics folder, require suddenly stops working.
server.js:
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'public')));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.get("/", (req, res) => {
console.log("here")
res.render("index")
})
app.listen(3000)
I think you are mixing between the client and server.
The client JS is for adding functionality to you front-end, like, preform some action when a button is clicked. For this you have a few options:
<script> tag:<script>
document.getElementById("id").innerHTML = "This is my Id";
</script>
<script> tag:<body id="test">
<button><a href="#" onClick="alert('Clicked!');">Click Me</a></button>
</body>
.JS file you will link to your HTML using:<script src="index.js"></script>
best practice is to place your <script> tag at the very end of your HTML <body> tag.
Now if you want a server to receive the data from the client and preform some actions you will need to create an express server that will expose an endpoint which will do that.
so your HTML will look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="http://localhost:3000/test" method="POST">
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" /><br />
<button type="submit">Submit</button>
</form>
</body>
</html>
And your express JS file will look like this:
const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: true }));
app.post("/test", (req, res) => {
console.log(req.body);
res.status(200).send(`Info submitted, Full Name: ${req.body.firstname} Last Name: ${req.body.lastname}`);
});
app.listen(3000, () => {
console.log("Server started on port 3000");
});