Writing form data to a json file - javascript

Question

I've been scratching my head over this for awhile. I have plans for a desktop application using Electron. Thus, I am developing an application using Node.js and Express.js . I have a simple app.js file that launches my site code:

var express = require("express");
var app = express();

app.use(express.static(__dirname + '/public'));

app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
});

Then I have a form on my page:

<form>
    <input type="text" name="name">
    <input type="text" name="url">
    <button type="submit">Submit</button>
</form>

There is a jQuery event handler set on the submit button from a script.js file:

$(document).ready(function(){
    var text;
    $('form').submit(function( event ) {
        text = $( this ).serializeArray();
        console.log( text );
        event.preventDefault();
    });
});

How do I take the text I get from the form and write to a JSON file (that can be read again when the application is closed and reopened).

There is this question and answer: Writing files in Node.js

And I understand that, but how do I execute that code from my submit button?

My file structure is quite simple:

|- app.js
|- package.json
|- node_modules
|- public_
   |- data.json
   |- index.html
   |- jquery.js
   |- script.js
   |- style.css
   |- bootstrap.min.css
   |- bootstrap.min.js

XCS · Accepted Answer · 2016-04-15 18:56:57Z

1

On client:

$(document).ready(function(){
    var text;
    $('form').submit(function( event ) {
        text = $( this ).serializeArray();
        // Send data to server
        $.post('/saveFile', {data: text});
        event.preventDefault();
    });
});

So, you can send the data using an AJAX request. See more about jQuery.post()

On server:

app.post('saveFile', function(req, res) {
    // Write to file, I think received data is in req.body.data 
});

Here we create a route called saveFile that receives and response to POST requests. You can here write the received data to your file.

So, you would have something like this:

app.post('saveFile', function(req, res) {
    fs.writeFile("save.txt", req.body.data, function(err) {
        if(err) {
            return console.log(err);
        }

        console.log("The file was saved!");
        res.end("This message will be sent back to the client!");
    }); 
});

edited Apr 15, 2016 at 18:56

answered Apr 15, 2016 at 18:35

XCS

28.3k28 gold badges105 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Bonanza Over a year ago

One small thing. Express currently is not parsing body. You need to add body-parser. Express req.body. Or proper question in Stackoverflow How to retrieve POST query parameters in Express

E.Arrowood Over a year ago

This all compiles fine and produces no errors, but I need help with writing to the file from within the app.post function.

XCS Over a year ago

Yeah, there are many things to take in account, he might also want to do something on the client after the request was completed. I decided just to answer his question on how to execute something on the server on form submit.

XCS Over a year ago

As you said, simply use this function: stackoverflow.com/questions/2496710/…

E.Arrowood Over a year ago

I am getting a 500 (Internal Server Error) on my browser and a TypeError: Cannot read property 'data' of undefined

|

Collectives™ on Stack Overflow

Writing form data to a json file - javascript

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related