How to submit form data to mongodb atlas-CodePudding

i want a user to input data in a form i created and i want the data to be sent to mongodb atlas.

so i host the form locally and it gives me an error "require is not defined".

my question is do i have to bundle the mongodb module or is there a way to do it without bundleing.

this is the code.

I USE THE VSCODE LIVE EXTENSION TO HOST.

document.querySelector(`input[type="submit"]`).onclick = () =>
{
    var x = document.forms["form1"]["username"].value;
    var password = document.forms["form1"]["password"].value;
    var email ={
        name : `${x}`,
        password : `${password}`
    };
    if(document.querySelector(`input[type="checkbox"]`).checked){
        var json = JSON.stringify(email);
        var MC = require('mongodb').MongoClient;
        var url = "mongodb srv://<username>:<password>@cluster0.xjoqb.mongodb.net/myFirstDatabase?retryWrites=true&w=majority";
        MC.connect(url, (err, db) => {
            if (err) {
                throw err;
            }
            console.log(`Connected`);
            var data = db.db(`mydb`);
            data.createCollection(`first`, (err, res) => {
                if (err) throw err;
                console.log(`collection created`)
            });
            data.collection(`first`).insertOne(email, (err, res) => {
                if(err) throw err;
                console.log(`inserted`);
                db.close();
            });
        });
    }
}

This is the html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="google-signin-client_id" content="707054985283-cirkm54740d0pm838hrgq7etkp3hu3ej.apps.googleusercontent.com">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        
        <fieldset>
            <h1 id="greeting">Welcome Back</h1>
            <p id="greeting2">Let's Get Signed In</p>
            <form name="form1"  method="POST" autocomplete="off" spellcheck="false"> 
                <div  data-onsuccess="onSignIn"></div>
                <div >
                    <input type="text" id="name" name="username" placeholder="Enter Your Email Address">
                    <img src="https://img.icons8.com/windows/50/000000/name.png" >
                </div> 
                <div >
                    <input type="password" id="pass" name="password" placeholder="Enter Your Password">
                    <img src="https://img.icons8.com/windows/50/000000/password.png" >  
                </div>
            </form>
            <a href="href">Forgot Password?</a>
            <div id="alm">
                <input type="checkbox" id="remember" name="remem">
                <label for="remem">Remember Me</label>
            </div>
            <form >
                <input type="submit" name="submit" id="submit1">
            </form>
        </fieldset>
</body>
<script src="script.js"></script>
</html>

CodePudding user response：

Databases (remote or local) are server side services. You need a back end app that handles the post request from the form located in the front end part and then from the backend trigger any action into Mongo Atlas.

Going with a NodeJS & Express stack could be a good option for you (you will also need to work with mongo in the backend, but in this case you will be storing the data in a remote Mongo Database).