How can I let an html page rendered by node.js call back to the node.js file?

Question

I am trying to create a registry system with node.js and HTML, the problem is that my html page is rendered by node.js, and when i want to call it back to the node.js file, it seems like it cannot find the js file.

Here is my js code:

const http = require('http');
const fs = require('fs');

http.createServer(function (req, res) {
    res.writeHead(200, { 'content-type': 'text/html' });
    const html = fs.readFileSync('Index.html');
    res.end(html);
}).listen(3000, () => {
    console.log('running on 3000');
}); 

function insertdatabase() {

    var email = document.getElementById("email").value;
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;


    const { Connection, Request } = require("tedious");

    // Create connection to database
    const config = {
        authentication: {
            options: {
                userName: "******", // update me
                password: "**********" // update me
            },
            type: "default"
        },
        server: "*********************", // update me
        options: {
            database: "************", //update me
            encrypt: true
        }
    };

    const connection = new Connection(config);

    // Attempt to connect and execute queries if connection goes through
    connection.on("connect", err => {
        if (err) {
            console.error(err.message);
        } else {
            queryDatabase();
        }
    });

    function queryDatabase() {
        console.log("Reading rows from the Table...");

        // Read all rows from table
        const request = new Request(
            `INSERT INTO [dbo].[dbo] (email, username, password)
  VALUES ('${email}', '${username}', '${password}');
SELECT * FROM [dbo].[dbo] `,
            (err, rowCount) => {
                if (err) {
                    console.error(err.message);
                } else {
                    console.log(`${rowCount} row(s) returned`);
                }
            }
        );

        request.on("row", columns => {
            columns.forEach(column => {
                console.log("%s\t%s", column.metadata.colName, column.value);
            });
        });

        connection.execSql(request);
    }
}

and here is my html code:

<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: url() no-repeat;
            background-size: cover;
            font-family: sans-serif;
            background-image: url(image/hbg.gif)
        }

        .topnav {
            overflow: hidden;
            background-color: whitesmoke;
        }

            .topnav a {
                float: left;
                color: black;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-size: 17px;
            }

                .topnav a:hover {
                    background-color: white;
                    color: black;
                }

                .topnav a.active {
                    background-color: black;
                    color: white;
                }

        .register-box {
            width: 380px;
            height: 480px;
            position: relative;
            margin: 6% auto;
            background-color: whitesmoke;
            padding: 5px;
        }

        .userinput-box {
            width: 100%;
            padding: 10px 0;
            margin: 5px 0;
            border-left: 0;
            border-top: 0;
            border-right: 0;
            border-bottom: 1px;
            outline: none;
            background: transparent;
        }

        .userinput-group {
            top: 180px;
            position: absolute;
            width: 280px;
        }

        .button {
            background-color: #cbcbcb;
        }
    </style>
    <script src="server.js"></script>
</head>
<body>
    <div class="topnav">
        <a class="active" href="../Subpages/account.html">Log in</a>
        <a href="https://exampletonyhuang.azurewebsites.net/">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="../Subpages/shoppingcart.html">Shopping Cart</a>
        <a href="../Subpages/billinginfo.html">Billing info</a>
    </div>
    <div class="register-box">

        <br /><br /><center><h1><b>Register Account</b></h1></center>

        <form class="userinput-box">
            <center>
                <h3>Email: <input type="text" name="email" id="email" required></h3>
                <br /><h3>Username: <input type="text" name="username" id="username" required></h3>
                <br /><h3>Password: <input type="password" name="password" id="password" required></h3>
            </center>
        </form>
        <center>
            <input type="submit" class="button" onclick="insertdatabase()">
            <br />
                
        </center>
    </div>
</body>
</html>

My guess is that maybe an html page rendered by js cannot find other files? This guess is based on when I add the css file to the project, it cannot be found either. Is there a way to fix this problem, or do I have to try another method?

score 0 · Answer 1 · answered Dec 29 '20 at 16:57

Here is an example of what you're trying to do, but putting the function in a client-sided file and using id to listen on the buttons. You should really avoid just putting an import to the server-side script in a client-sided file as it will be public and that could cause huge security issues.

If you want to use functions that are in your server.js file, you can use this. It's a way to use form submission in your express application.

In addition, don't put your submit button outside your form.

How can I let an html page rendered by node.js call back to the node.js file?

1 Answers1