0

So I'm building a web application with the option to be admin and add data to a JSON file, which will be displayed onto another HTML page (index).

Now is my question: how to do it. How to get the data from the form, parse it, and put it in a JSON file. And can it be done without Node.js

This is my current JSON-file

{"accounts": [
  {"email": "example-mail@mail.com", "password2":"Duck123"},
  {"email": "example-mail2@mail.com", "password2":"Cow123"},
  {"email" : "example-mail3@mail.com", "password2": "Chicken123"}
]}

This is my "Admin" page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>ADMIN PAGE</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <form id="adminform" action="#" method="post">
                    <div class="form-group">
                        <label for="emailadress">Email Address</label>
                        <input type="email" class="form-control" id="emailadress" required autocomplete="false">
                    </div>
                    <div class="form-group">
                        <label for="password2">Password</label>
                        <input type="password" class="form-control"  id="password2" required>
                        <input type="button" value="Show Password" readonly onclick="passwordShow()" autocomplete="false">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</body>
<script>
//show password on button click
    function passwordShow() {
        var x = document.getElementById("password2");
        if (x.type === "password") {
            x.type = "text";
        } else {
            x.type = "password";
        }
    }
</script>
</html>

If somebody knows how to do it, or has a tip, please let me know!

CBroe
  • 91,630
  • 14
  • 92
  • 150
Cedric Fortuin
  • 51
  • 10
  • It's all very well to reject Node.js, but if not Node.js then what? You need *some* server-side programming language. – Quentin Jul 06 '20 at 09:13

1 Answers1

0

Direct writing to the filesystem can not be done from inside the Browser. However you have the possibility to create a "download" link, so that the user gets a notification that a file should be downloaded and can pick a location where to store that file.

Copied the following snippet from Stackoverflow: Download JSON object as a file from browser. You can use it to create exactly that download containing your json content.

function downloadObjectAsJson(exportObj, exportName){
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
    var downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href",     dataStr);
    downloadAnchorNode.setAttribute("download", exportName + ".json");
    document.body.appendChild(downloadAnchorNode); // required for firefox
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
}
Felix Lemke
  • 6,189
  • 3
  • 40
  • 67