<div class="email">
<section class="subscribe">
<div class="subscribe-pitch">
</div>
<form action="#" method="post" class="subscribe-form" id="emails_form">
<input type="email" class="subscribe-input" placeholder="Enter email for newsletter" >
<button id="email_submit" type="submit" value="send" class="subscribe-submit"><i class="fa fa-chevron-right"></i></button>
</form>

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

<div class="email">
<section class="subscribe">
<div class="subscribe-pitch">
</div>
<form action="#" method="post" class="subscribe-form" id="emails_form">
<input type="email" class="subscribe-input" placeholder="Enter email for newsletter" >
<button id="email_submit" type="submit" value="send" class="subscribe-submit"><i class="fa fa-chevron-right"></i></button>
</form>

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

• javascript
• jquery
• html
• css
• json

• Is the json file downloaded by the user or is it sent somewhere else? – Marius P. Commented Aug 15, 2016 at 21:09
• What kind of server is this email form (or the HTML page containing it) hosted on? – cjs1978 Commented Aug 15, 2016 at 21:11
• Possible duplicate of Convert form data to JavaScript object with jQuery – charsi Commented Aug 15, 2016 at 21:11
• Look at this answer stackoverflow.com/a/2276477/3029422, it also has an example – Ionut Commented Aug 15, 2016 at 21:11
• You need to save it on the server? If that's the case, Javascript doesn't have anything to do here. Maybe PHP (or whatever server-side language the server is using) will help you (with something like json_encode()). But, as always, if you have a Javascript array and you need to get the JSON string in Javascript, JSON.stringify() could help you. developer.mozilla.org/es/docs/Web/JavaScript/Referencia/… – Alejandro Iván Commented Aug 15, 2016 at 21:14

3 Answers 3

DEMO

Using Serializing we can save input html form to JSON output

<script type="text/javascript">
  $(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(); 
});
});
</script>

HTML

<div id="header">
 Send Form's data as JSON
</div>

<form id="myform" type="post">
  <fieldset>
    <legend>Ajax Form  </legend>
    <p>We would love to hear from you. Please fill out this form</p>
    <div class="elements">
      <label for="name">Name :</label>
      <input  required="required" type="text"  value="Girish Kumar Santhu" name="fname"  size="20"  />
    </div>
     <div class="elements">
      <label for="Age">Age :</label>
      <input required="required" type="number" value="32" id="age" name="age" size="10" />
    </div>  
    <div class="elements">
      <label for="pro"> Profession :</label>
      <select name="pro">
   <option value="Student">Student</option>
   <option value="Engineer" selected="selected">Engineer</option>
   </select>
    </div>      
    <div class="elements">
    <label for="Gender">Gender: </label>
      <input type="radio" name="gender" value="Male" checked="checked" id="r1"> Male 
  <input type="radio" name="gender" value="Female" id="r2"> Female 
</div>  
    <div class="elements">
      <label for="hobby">Hobby :</label>
      <input type="checkbox" name="hobby[]" value="Sports" id="ch1" checked="checked"> Sports 
  <input type="checkbox" name="hobby[]" value="Coding"  id="ch2"> Coding 
   </div>

    <div class="submit">
       <input type="submit" id="btn" name="btn" class="btn" value="Submit" />
    </div>
    <span class="elements">Press "Ctrl + Shift + J" to see sent JSON in console: <span>
  </fieldset>
</form>

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');
}

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.