0

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.

Dipanjan Dey
  • 1
  • 2
  • 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 https://stackoverflow.com/questions/15778572/preventing-sql-injection-in-node-js – nbk Oct 17 '20 at 18:10

1 Answers1

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..');
});
Ivo Gjorgjievski
  • 129
  • 3