How to save html form data to json file using javascript

I need to save the input data from a simple email form to a json file.I think I do that with javascript. Can someone help step by step please? I am novice

asked Aug 15, 2016 at 21:08

7

DEMO

Using Serializing we can save input html form to JSON output

  $[document].ready[function[] {
  $["#btn"].click[function[e]{
     var jsonData = {};

   var formData = $["#myform"].serializeArray[];
  // console.log[formData];

   $.each[formData, function[] {
        if [jsonData[this.name]] {
           if [!jsonData[this.name].push] {
               jsonData[this.name] = [jsonData[this.name]];
           }
           jsonData[this.name].push[this.value || ''];
       } else {
           jsonData[this.name] = this.value || '';
       }


   }];
   console.log[jsonData];
    $.ajax[
    {
        url : "action.php",
        type: "POST",
        data : jsonData,

    }];
    e.preventDefault[]; 
}];
}];

HTML

 Send Form's data as JSON



  
    Ajax Form  
    
We would love to hear from you. Please fill out this form
    

      Name :
      
    
     

      Age :
      
    
  
    

       Profession :
      
   Student
   Engineer
   
    
      
    

    Gender: 
       Male 
   Female 
  
    

      Hobby :
       Sports 
   Coding 
   

    

       
    
    Press "Ctrl + Shift + J" to see sent JSON in console: 
  

answered May 12, 2017 at 11:32

Surya R PraveenSurya R Praveen

3,0691 gold badge23 silver badges20 bronze badges

1

You need to use

'use strict';

const fs = require['fs'];

let student = {
    name: 'Mike',
    age: 25, 
    gender: 'Male',
    department: 'English',
    car: 'Honda' 
};

let data = JSON.stringify[student];  

fs.writeFileSync['file.json', data, finished];

function finished[err]
{
    console.log['success'];
}

Andreas

5,1708 gold badges42 silver badges51 bronze badges

answered Jun 11, 2018 at 2:31

bobbob

661 silver badge2 bronze badges

1

With jQuery, it's quite simple:

var formData = JSON.stringify[$["#emails_form"].serializeArray[]];

If you want to store formData in a JSON file, you need to post it to the server [e.g. per AJAX] and save it. But in that case, you can simply post the form und convert it to JSON on the server itself.

See this answer.

answered Aug 15, 2016 at 21:14

andreasandreas

15.7k12 gold badges72 silver badges71 bronze badges

How do you store data from HTML form to JSON?

How can I convert form data to JSON?

Can HTML be stored in JSON?