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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: </b></label><input id="name1" type="text" name="user_name" placeholder="Your Name." required><label style="color:red; font-size:18px;"><b>&nbsp;*</b></label><br><br>  <!--placeholder="Your Name."-->
                <label id="email"><b>Your E-mail &nbsp;&nbsp;&nbsp;&nbsp;: </b></label><input id="email1" type="email" name="user_email" placeholder="Your Email ID." required><label style="color:red; font-size:18px;"><b>&nbsp;*</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>&nbsp;*</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.

niojs will respond to your request the same as a php script does, in this case bith are equal. if you want to know how tio acces mysql from node js see stackoverflow.com/questions/15778572/… — nbk
– nbk, Commented Oct 17, 2020 at 18:10

Ivo Gjorgjievski · Accepted Answer · 2020-10-17 19:33:47Z

1

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..');
});

answered Oct 17, 2020 at 19:33

Ivo Gjorgjievski

1293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

O. Jones Over a year ago

Exactly. You cannot connect to MySql from Javascript code that runs in your browser.

Collectives™ on Stack Overflow

How can I submit HTML form data into MySql database table using javascript along with node.js - mysql and without php?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related