Save html form input to json file

Question

<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

Is the json file downloaded by the user or is it sent somewhere else? — Marius P., Aug 15 '16 at 21:09
What kind of server is this email form (or the HTML page containing it) hosted on? — cjs1978, Aug 15 '16 at 21:11
Possible duplicate of [Convert form data to JavaScript object with jQuery](http://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery) — charsi, Aug 15 '16 at 21:11
Look at this answer http://stackoverflow.com/a/2276477/3029422, it also has an example — Ionut, Aug 15 '16 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. https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify — Alejandro Iván, Aug 15 '16 at 21:14
@MariusP. It just says to save it to a json file.I guess on my site root folder..I dont really know what it means — , Aug 15 '16 at 21:29
@cjs1978 It is my own home.html file.The psd for the site says to save the data from the email form to a json file — , Aug 15 '16 at 21:29

score 9 · Answer 1 · answered May 12 '17 at 11:32

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>

Pls your answer is useful for me. But how can I save this to file not console at this point. Thanks — Emmy, Sep 06 '17 at 18:57

score 5 · Accepted Answer · edited Jul 07 '20 at 10:13

5

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

edited Jul 07 '20 at 10:13

Andreas

5,393
9
44
53

answered Jun 11 '18 at 02:31

bob

66
1
2

But this would work only with Node and not if the code is executed into the browser... – FLAK-ZOSO Oct 10 '21 at 08:23

score 0 · Answer 3 · edited May 23 '17 at 11:47

0

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.

edited May 23 '17 at 11:47

Community

1
1

answered Aug 15 '16 at 21:14

andreas

16,357
12
72
76

Save html form input to json file

3 Answers3

Linked