How can I submit HTML form data into MySql database table using javascript along with node.js - mysql and without php?
Question
I was trying to make a blog where a viewer(guest) can send message to the blogger. HTML form prepared and in onclick() function of the Submit button of the HTML form, a javascript (named Db_connect.js) function named submitData() is executed. In submitData(), two more functions are called from the same javascript - one to establish connection with mysql and another to execute mysql query to insert data in a database to store form data. Another function called named openWin(), is nothing but to display the content inserted in a seperate new small window.
This is the javascript Code that I am using to connect to databse:
var con, sql;
function randomNumber(min, max) {
return Math.floor(Math.random()* (max - min) + min);
}
function submitData(objButton) {
name = document.getElementById('name1').value;
email = document.getElementById('email1').value;
msg = document.getElementById('msg1').value;
i= randomNumber(1000000000000000,9999999999999999);
document.getElementById('test').innerHTML=name;
sql="INSERT INTO my_table(id, name, email, msg) VALUES(" + i + ", '" + name + "', '" + email + "', '" + msg + "')";
createConnection();
insertData(sql);
openWin();
}
var mysql = require('mysql');
function createConnection() {
con = mysql.createConnection({
host: "localhost",
user: "username",
password: "password",
database: "mydb"
});
}
function insertData(sql_insert) {
con.connect(function(err) {
if (err) throw err;
con.query(sql_insert, function (err) {
if (err) throw err;
});
});
}
function openWin(){
var myBars = 'directories=no,location=no,menubar=no,status=no';
myBars += ',titlebar=no,toolbar=no';
var myOptions = 'scrollbars=no,width=400,height=200,resizeable=no';
var myFeatures = myBars + ',' + myOptions;
var newWin = open('', 'myWin', myFeatures);
newWin.document.writeln('<form>');
newWin.document.writeln('<table>');
newWin.document.writeln('<tr><td>Your Message Sent...');
newWin.document.writeln('</td></tr>');
newWin.document.writeln('<tr valign=TOP><td>');
newWin.document.writeln('<textarea cols=45 rows=7 wrap=SOFT>');
newWin.document.writeln('Your Name : '+name);
newWin.document.writeln('Your Email : '+email);
newWin.document.writeln('Your Message : '+msg);
newWin.document.writeln('Data Inserted!!!</textarea>');
newWin.document.writeln('</td></tr>');
newWin.document.writeln('<tr><td>');
newWin.document.writeln('<input type=BUTTON value="Close"');
newWin.document.writeln(' onClick="window.close()">');
newWin.document.writeln('</td></tr>');
newWin.document.writeln('</table></form>');
newWin.document.close();
newWin.focus();
}
And this is the HTML code I am using :
<head>
<script src="Db_Connect.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript"></script>
<div id="frm">
<form>
<label id="name"> <b>Your Name : </b></label><input id="name1" type="text" name="user_name" placeholder="Your Name." required><label style="color:red; font-size:18px;"><b> *</b></label><br><br> <!--placeholder="Your Name."-->
<label id="email"><b>Your E-mail : </b></label><input id="email1" type="email" name="user_email" placeholder="Your Email ID." required><label style="color:red; font-size:18px;"><b> *</b></label><br><br> <!--placeholder="Your Email ID."-->
<label id="msg"> <b>Your Message : </b></label><textarea id="msg1" name="user_msg" maxlength="200" placeholder="Maximum 200 letters." required></textarea><label style="color:red; font-size:18px;"><b> *</b></label><br> <!--<span id="send"><a id="link" href="http://www.google.co.in" target="_blank"><b>Send</b></a></span>-->
<label style="color:red;font-size:10px;"><b>* Required fields</b></label><br>
<input type="submit" id="link" value="Send" onclick="submitData(this)"> <!--onclick="submitData(this)"-->
</form>
</div>
</body>
The same javascript without data input from HTML is working fine from Console. But, with HTML form data passed to it, it is not working at all. Note that, I am not using php and don't want to use it. Please help me to get rid of the problem and provide me some solution to it without use of php.
1 answers
solution1
1 2020-10-17 19:33:47
You have to create web server with node.js and express.js and then get the data from HTML FORM POST. Follow link and code example.
https://www.tutorialsteacher.com/nodejs/expressjs-web-application
Handle POST Request
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="/submit-student-data" method="post">
First Name: <input name="firstName" type="text" /> <br />
Last Name: <input name="lastName" type="text" /> <br />
<input type="submit" />
</form>
</body>
</html>
var express = require('express');
var app = express();
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', function (req, res) {
res.sendFile('index.html');
});
app.post('/submit-student-data', function (req, res) {
var name = req.body.firstName + ' ' + req.body.lastName;
res.send(name + ' Submitted Successfully!');
});
var server = app.listen(5000, function () {
console.log('Node server is running..');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.