When I try to submit the form I receive
TypeError: Cannot read property 'Fname' of undefined.
Please anyone help me by telling me what is the error. Here is my contact.html file:
<!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>contact</title>
<link rel="stylesheet" href="css/contact.css" />
<script
src="https://kit.fontawesome.com/a076d05399.js"
crossorigin="anonymous"
></script>
</head>
<body>
<section id="contactsection1">
<div class="logo">
<a href="/">CodeSmashers</a>
<h3>Learn Coding with us</h3>
</div>
<label id="icon" onclick="ToggleMenu()">
<i class="fas fa-bars"></i>
</label>
<nav id="navbar">
<ul id="manu">
<li class="item"><a href="/">HOME</a></li>
<li class="item"><a href="/about">ABOUT</a></li>
<li class="item"><a href="/blog">BLOG</a></li>
<li class="item"><a href="/contact">CONTACT</a></li>
</ul>
</nav>
<h1>Contact</h1>
</section>
<section id="contactsection2">
<form method="POST" action="/contact" id="form" type="submit">
<div id="forminput">
<input type="text" name="Fname" placeholder="First Name" />
<input type="text" name="Lname" placeholder="Last Name" />
<input type="text" name="subject" placeholder="subject" />
<textarea
class="inputtext"
name="message"
id="massege"
cols="30"
rows="10"
placeholder="Your Massege"
></textarea>
</div>
<button class="btn">Send Massege</button>
</form>
</section>
<footer>
<nav id="navfooter">
<ul id="manu">
<li class="item"><a href="/">HOME</a></li>
<li class="item"><a href="/about">ABOUT</a></li>
<li class="item"><a href="/blog">BLOG</a></li>
<li class="item"><a href="/contact">CONTACT</a></li>
</ul>
</nav>
<div class="social_icons">
<img src="img/twiter.png" alt="twiter" class="social" />
<img src="img/facobook.jpg" alt="facebook" class="social" />
<img src="img/instagram.png" alt="instagram" class="social" />
<img src="img/youtube.png " alt="youtube" class="youtube" />
</div>
</footer>
<hr />
<h4 class="copyright">
Copyright@ <a href="/">CodeSmashers</a> | All rights reserved!
</h4>
<script>
let menu = document.getElementById("manu");
function ToggleMenu() {
if (menu.style.display == "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}
</script>
</body>
</html>
and here is my node app:
const express = require("express");
const app = express();
const path = require("path");
var mysql = require("mysql");
var con = mysql.createconnection({
host: "localhost",
user: "root",
password: "",
database: "codesmashers",
table: "contactinfo",
});
app.get("/", function (req, res) {
res.sendfile(__dirname + "/index.html");
});
app.get("/about", function (req, res) {
res.sendfile(__dirname + "/about.html");
});
app.get("/blog", function (req, res) {
res.sendfile(__dirname + "/blog.html");
});
app.get("/contact", function (req, res) {
res.sendfile(__dirname + "/contact.html");
});
app.post("/contact", function (req, res) {
var fname = req.body.fname;
var lname = req.body.lname;
var subject = req.body.subject;
var message = req.body.message;
res.write('you sent the fname "' + req.body.fname + '".\n');
res.write('you sent the lname "' + req.body.lname + '".\n');
res.write('you sent the subject "' + req.body.subject + '".\n');
res.write('you sent the message "' + req.body.message + '".\n');
con.connect(function (err) {
if (err) {
throw err;
}
console.log("connected to database!");
var sql =
"insert into form (fname, lname, subject, message) values ('" +
fname +
"', '" +
lname +
"','" +
subject +
"'.'" +
message +
"')";
con.query(sql, function (err, result) {
if (err) throw err;
console.log("inserted successfully!");
res.end();
});
});
});
app.use(express.static(__dirname));
app.listen(3000, () => {
console.log("application started listening at port 3000");
});
I am able to enter the form data but, I am not able to insert it to the database. please mention where I am doing wrong. remaining things in node app are working well but, in the fname field, there is an error. thanks in advance.
