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.
– 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
– cjs1978, Commented Aug 15, 2016 at 21:11
Possible duplicate of Convert form data to JavaScript object with jQuery — charsi
– charsi, Commented Aug 15, 2016 at 21:11
Look at this answer stackoverflow.com/a/2276477/3029422, it also has an example — Ionut
– 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
– Alejandro Iván, Commented Aug 15, 2016 at 21:14

Surya R Praveen · Accepted Answer · 2017-05-12 11:32:53Z

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

Andreas · Accepted Answer · 2020-07-07 10:13:22Z

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 7, 2020 at 10:13

Andreas

5,63710 gold badges48 silver badges57 bronze badges

answered Jun 11, 2018 at 2:31

bob

661 silver badge2 bronze badges

1 Comment

FLAK-ZOSO Over a year ago

But this would work only with Node and not if the code is executed into the browser...

Community · Accepted Answer · 2017-05-23 11:47:13Z

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, 2017 at 11:47

CommunityBot

11 silver badge

answered Aug 15, 2016 at 21:14

andreas

17k13 gold badges81 silver badges83 bronze badges

Collectives™ on Stack Overflow

Save html form input to json file

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related