title: How to insert data to MySQL using HTML & Node JS?
body: <p>I am trying to insert registration data into MySQL using HTML and JS in Visual Studio.</p>
  
  <p>I am able to view the webpage, click on the sign-up link and complete the registration form. The problem occurs when I press <em>submit</em> (sign-up). The page returns to the main webpage and nothing is added to the database. I receive no error messages or anything.</p>
  
  <p>The code for the form is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var mysql = require('mysql');
  var express = require('express');
  var app = express();
  var server = null;
  
  var con = mysql.createConnection({
    host: "localhost",
    user: "Personal",
    password: "****************",
    database: "Personal"
  });
  
  app.get('/api/users', function(req, res) {
    con.query("SELECT * FROM users", function(err, result, fields) {
      if (err)
        return console.trace('fatal error: ' + err.message);
      res.json(result);
    });
  });
  
  app.get('/index', function(req, res) {
    res.sendfile('index.html', {
      root: __dirname + '/public'
    });
  });
  
  app.use('/static', express.static('public'))
  
  app.get('/', function(req, res) {
    res.sendfile('index.html', {
      root: __dirname + '/public'
    });
  });
  
  con.connect(function(err) {
    if (err)
      return console.trace('fatal error: ' + err.message);
    server = app.listen(5000, function() {
      console.log('Server is running..');
    });
  
  });
  
  
  app.post('/signup', function(req, res) {
  
    var fname = req.body.fname;
    var lname = req.body.lname;
    var company = req.body.company;
    var email = req.body.email;
    var contact = req.body.contact;
    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 company "' + req.body.company + '".\n');
    res.write('You sent the email "' + req.body.email + '".\n');
    res.write('You sent the contact "' + req.body.contact + '".\n');
  
    con.connect(function(err) {
      if (err) throw err;
      var sql = "INSERT INTO form (fname, lname, company, email, contact) VALUES ('" + fname + "', '" + lname + "', '" + company + "', '" + email + "', '" + contact + "')";
      con.query(sql, function(err, result) {
        if (err) throw err;
        console.log("1 record inserted");
        res.end();
      });
    });
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Personal&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" type="text/css" href="static/index.css"&gt;
  
    &lt;body&gt;
      &lt;div class="header"&gt;
        &lt;h1&gt;Personal&lt;/h1&gt;
        &lt;P&gt;Personal&lt;/P&gt;
      &lt;/div&gt;
      &lt;button onclick="document.getElementById('id01').style.display='block'" style="width:25%;" class="center"&gt;Login&lt;/button&gt;
      &lt;div id="id01" class="modal"&gt;
        &lt;span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal"&gt;&amp;times;&lt;/span&gt;
        &lt;form class="modal1-content"&gt;
          &lt;div class="container1"&gt;
            &lt;h1&gt;Login&lt;/h1&gt;
            &lt;p&gt;personal&lt;/p&gt;
            &lt;hr&gt;
            &lt;label for="Username"&gt;&lt;b&gt;Username&lt;/b&gt;&lt;/label&gt;
            &lt;input type="text" placeholder="Username" name="Username" required&gt;
            &lt;label for="psw"&gt;&lt;b&gt;Password&lt;/b&gt;&lt;/label&gt;
            &lt;input type="password" placeholder="Password" name="psw" required&gt;
            &lt;label&gt;
  &lt;input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"&gt; Remember me
  &lt;/label&gt;
            &lt;br /&gt;
            &lt;input type="submit" value="login" class="login" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;script&gt;
        var modal = document.getElementById('id01');
        window.onclick = function(event) {
          if (event.target == modal) {
            modal.style.display = "none";
          }
        }
      &lt;/script&gt;
      &lt;button onclick="document.getElementById('id02').style.display='block'" style="width:25%;" class="center"&gt;Sign-up&lt;/button&gt;
      &lt;div id="id02" class="modal1"&gt;
        &lt;span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal1"&gt;&amp;times;&lt;/span&gt;
        &lt;form class="modal1-content"&gt;
          &lt;div class="container"&gt;
            &lt;h1&gt;Sign Up&lt;/h1&gt;
            &lt;p&gt;Please fill in this form to create an account.&lt;/p&gt;
            &lt;hr&gt;
            &lt;form action="/signup" method="POST"&gt;
              &lt;label for="fname"&gt;&lt;b&gt;First Name&lt;/b&gt;&lt;/label&gt;
              &lt;input type="text" placeholder="Enter First Name" name="first name" required&gt;
              &lt;label for="lname"&gt;&lt;b&gt;Last Name&lt;/b&gt;&lt;/label&gt;
              &lt;input type="text" placeholder="Enter Last Name" name="lname" required&gt;
              &lt;label for="company"&gt;&lt;b&gt;Company&lt;/b&gt;&lt;/label&gt;
              &lt;input type="text" placeholder="Enter Company" name="company" required&gt;
              &lt;label for="email"&gt;&lt;b&gt;Email&lt;/b&gt;&lt;/label&gt;
              &lt;input type="text" placeholder="Enter Email" name="email" required&gt;
              &lt;label for="contact"&gt;&lt;b&gt;Contact Number&lt;/b&gt;&lt;/label&gt;
              &lt;input type="text" placeholder="Enter Contact Number" name="contact" required&gt;
              &lt;label for="psw"&gt;&lt;b&gt;Password&lt;/b&gt;&lt;/label&gt;
              &lt;input type="password" placeholder="Enter Password" name="psw" required&gt;
              &lt;label for="psw-repeat"&gt;&lt;b&gt;Repeat Password&lt;/b&gt;&lt;/label&gt;
              &lt;input type="password" placeholder="Repeat Password" name="psw-repeat" required&gt;
              &lt;label&gt;
  &lt;input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"&gt; Remember me
  &lt;/label&gt;
              &lt;p&gt;By creating an account you agree to our &lt;a href="#" style="color:dodgerblue"&gt;Terms &amp; Privacy&lt;/a&gt;.&lt;/p&gt;
              &lt;input type="submit" value="Sign-up" class="signup" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;/form&gt;
      &lt;/form&gt;
      &lt;script&gt;
        var modal1 = document.getElementById('id02');
        window.onclick = function(event) {
          if (event.target == modal1) {
            modal1.style.display = "none";
          }
        }
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/head&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I fix this?</p>