//===================================================
// SETTING UP HTML FORM JSON SERIALIZATION //
//===================================================
(function ($) {
$.fn.serializeFormJSON = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
})(jQuery);
//===================================================
// POSTING THE DATA FROM AN HTM FORM //
//===================================================
$('#form').submit(function(e) {
// prevent default submiting form
e.preventDefault();
// serialize data to JSON
var data = $('#form').serializeFormJSON();
$.ajax({
url: 'https://sheetsu.com/apis/020b2c0f',
data: data,
dataType: 'json',
type: 'POST',
// place for handling successful response
// showing (redirecting to) something like /thanks.html
// page could be a good idea
success: function(data) {
console.log("Successfully inserted:");
console.log(data);
},
// handling error response
error: function(data) {
console.log("Couldn't insert data into API");
}
});
return false;
});
/* -> HTML CODE WITH THE DATA INPUTS
<form id="form">
<label for="id">ID</label>
<input type="text" id="id" name="id">
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="score">Score</label>
<input type="text" id="score" name="score">
<button type="submit">POST!</button>
</form>
*/
Using the Sheetsu web service (allows you to have google docs' spreadsheets as restful APIs) to POST a new row into the spreadsheet.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.