Save form data into local json file using jquery

Question

I have a basic form with some input fields. I want to save the form data into a json file on submitting the form. The format of the saved data in the json file should be like this.

[
    {"title":"some text","description":"some text","info":"some text","username":"some name"},
    {"title":"some text","description":"some text","info":"some text","username":"some name"},
    {"title":"some text","description":"some text","info":"some text","username":"some name"}
]

I tried doing this by using this code, but no data is saved in my 'story.json file'

$('form').submit(function() {
    $.ajax({
       type: 'POST', 
       dataType: 'json', 
       url: 'story.json', 
       data: $(this).serialize(), 
       success: function(data) { 
           alert(data.message); 
       },
       failure: function (data) {
           alert('Please try again');
       }
    });
 });

I want to save this form data on my local file. Please help me to find the correct way of doing this. Thanks

I would go out and say that unless you are good with configuring your http server, you need a server side language, have you got one? — Roderick Obrist
– Roderick Obrist, Commented Oct 28, 2012 at 9:07
you can save to localStorage for browsers that support it without needing server... is this a viable solution? — charlietfl
– charlietfl, Commented Oct 28, 2012 at 11:36
yes, not possible without a server side language.Thats the answer.Thanks — Alonso
– Alonso, Commented Oct 29, 2012 at 20:13

StaticVariable · Accepted Answer · 2012-10-28 10:05:48Z

3

You need to post data to a simple php file...

like url: 'story.php' In that php file create a 'story.json' using fopen and store that json

EDIT: if you want to use serialize() than use someting like this

data:{'mydata':$(this).serialize()}

and in php file

parse_str($_POST['mydata'],$newarray) ;

echo json_encode($newarray);

edited Oct 28, 2012 at 10:05

answered Oct 28, 2012 at 9:09

StaticVariable

5,2934 gold badges26 silver badges46 bronze badges

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

1 Comment

Alonso Over a year ago

ok..So how can i save this form data in the above format in a json object using .serialize() or .serializeArray() method.

HMR · Accepted Answer · 2012-10-28 09:14:56Z

2

JavaScript cannot save to a file unless it's a FireFox plugin.

What you do is post a form (sent it to the webserver) then let server side script handle it.

Serialize does not turn the form values into a JSON string:

http://api.jquery.com/serialize/

And when you use $.post then you have to return false in the $('form').submit(function() or the browser will submit the form for you.

Submitting a form is when you click a button and the whole page goes white for a moment and then you get a new page.

Ajax ($.post, $.get, $.getJson ...) is when you send information to the server without refreshing the page. Google maps is an excellent example.

answered Oct 28, 2012 at 9:14

HMR

39.5k26 gold badges99 silver badges175 bronze badges

Comments

user1726343 · Accepted Answer · 2012-10-28 09:12:33Z

0

Calling the serialize method on the form jQuery object does not return a JSON representation of its data. It returns a querystring representation of its data. As has been mentioned above, you will need to use a server side script to interpret (and manipulate) sent data and store it in a file as JSON.

answered Oct 28, 2012 at 9:12

user1726343

Collectives™ on Stack Overflow

Save form data into local json file using jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related