Save form data into local json file using jquery - javascript

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

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

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.

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.

Related

Unserialize data from a jquery ajax from and send email

I have a very long form in a php template, all data are send by a jquery ajax in serialize mode to a php page to send an email.
I have this problem: How I can unserialize the data in the php page, and send them by email ?
The php template is completed with different data. So I can't use for each fields just urldecode in this way $nome = urldecode($_POST['nome']);
I have to find a way for take all the data arrive in the php page and send them in an email. I read about parse_str But I don't know if can works and how use it.
At moment this is my ajax code:
var datiform = $("#FormWorkspace").serialize();
$.ajax({
type: "POST",
url: ".../form-cf/engine.php",
data: datiform,
dataType: "html",
success: function(datiform)
{
alert("success" + datiform);
},
error: function()
{
alert("no success " + datiform);
}
});
serializing in jquery means to actually create a string var1=1&var2=234. You can simple access the data using GET['var1'] or POST['var2'] in PHP.

how to send json data via get just as jquery does

I am trying to develop a function to send json data via get method using javascript instead of curl.
And it also works fine with the get method of jquery ajax api.For example,
$.ajax({
url : url,
type : "GET",
data : json,
dataType: "json",
//.....
//other code here.
})
But something wrong happened, when I try to send the same json data by the follow code as someone else suggest here.
xmlhttp.open("GET",url+"?pretty="+encodeURIComponent(JSON.stringify(json)),true);
xmlhttp.setRequestHeader("Content-type","application/json");
xmlhttp.send();
However,it seems that the json data is too large to be encoded inside the url, and the url was truncated.
So, I wander how I can send the large json with javascript just as the jquery does.

HTML Form to XML File done, how do I post XML File to webserver?

I've created a form based on edits from another post I found on here, where the HTML form outputs in XML format once the submit button has been clicked. How do I now take this data once transformed and post it to a third-party server via HTTP POST instead of outputting on html?
My code in its current form can be found here.
http://jsbin.com/iyokay/15/edit
My knowledge of Javascript isn't great so any code based help would be greatly appreciated.
You can send your xml with ajax,
$("#DownloadButton").on("click",function(){
xml = update();
$.ajax({
url : "saveXml.php",
type:"post",
data : xml,
contentType: "text/xml",
success : function(response){
alert("xml saved successfully");
}
});
});
replace this $("#DownloadButton").click(update); with above code

Trying to open data retrieved from ajax to automatically download

Right now, I have a webapp that uses the jquery ajax to make a call (with params that change from call to call via a form) to my backend and retrieve an xml file. I want to put the xml data into a file with a different extension for a private application.
Basically I just want the user to be able to click a button, and it automatically prompts them to "open or save" a file containing the returned ajax xml data.
I've dabbled with sending a raw http header using php, but I can't figure out how to get it to work.
I'm writing all of this in javascript and jquery.
The only thing the below code does is (1)Make the Ajax Call, (2)Write the XML into an HTML page, (3) open the HTML page.
var format = function() {
$("button#format").click(function() {
$("#form").submit();
$.ajax({
url: "find",
beforeSend: function (xml) {
xml.overrideMimeType("application/octet-stream; charset=x-user-defined");
},
data: $("form#form").serialize(),
dataType: "html",
success: function(xml) {
xmlWindow = window.open("download.ivml");
xmlWindow.document.write(xml);
xmlWindow.focus();
},
error: function(request) {
$("#webdiv").html(request.responseText);
}
});
});
};
There is no need to force something like this into the AJAX paradigm, unless you need to play around with the data you retrieve before making it available for the user, then again, that should be able to be done in php. So I would do something like this:
<form id="format" action="download.ivml" target="_blank">
...
</form>
And in jquery modify the action like this
​$('#format')​.submit(function(){
// tweaking the post data, otherwise this whole block is not needed.
return true;
})​;
Finally on my server use a .htaccess file to handle that weird URL download.ivml
Options +FollowSymLinks
RewriteEngine on
RewriteRule ^(.*)download.ivml$ /path/to/where/I/process/the/request
not quite sure about the syntaxis of this last .htaccess file though.

using Blobstore Python API with ajax

there is any sample showing how to use the blobstore api with ajax?
when i use forms works fine, but if i use jquery i don't know how to send the file and i get this error:
blob_info = upload_files[0]
IndexError: list index out of range
I have this code in javascript
function TestAjax()
{
var nombre="Some random name";
ajax={
type: "POST",
async:true,
//dataType:"json",
url:"{{upload_url}}",
data:"nombreEstudio="+nombre,
error: function ()
{
alert("Some error");
$("#buscando").html("");
},
success: function()
{ alert("it's ok") }
};
$.ajax(ajax);
}
When i use forms the file it's sended with a input tag (exactly like the doc's sample)
I wrote a series of posts about exactly this.
Somehow you still need to get the multipart form data request to the server... so when you're using forms, I assume your <form> tag has something like this on it: enctype="multipart/form-data", right?
When you're just sending a "POST" via ajax, you're losing that multipart request, which is where your file is.
There are some jQuery "ajax file upload" plugins out there that may help you out.
Hope this helps!
** EDIT **
I guess one thing I can add to this is usually ajax file uploads (on the client) are implemented by either creating a hidden iframe, and using that iframe to submit a form, or using a form and posting it via JavaScript.

Categories

Resources