how to submit form as JSON object

Question

what I am doing is creating a form using JSON this form can then be edited a and produce new JSON object. The problem I am having seems to be with getting the form id. The code I am using to return a JSON object is:

form = document.forms[0];
$.fn.serializeObject = function()
{
    alert("start serializeObject");
    var o = {};
    var a = this.seralizeArray();
    $.each(a, function(){
        if (o[this.name] !== undefined) {
            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;
    alert(o);
};

$(function() {
    alert("here");
    form.submit(function(){
        result.append(JSON.stringify(form.serializeObject()));
        return false;
    });
});

This just refresh's the pageI am not sure why. This program is not on a server and not be used on a server. by this I mean It is only every going to be run locally on a local machine, with no apache2 setup.

Thanks.

Solution 1

You code can be written pretty easy. This is how I do it:

Ajax:

$('#formID').on('submit',function () {
    $.ajax({
        url: 'submit.php',
        cache: false,
        type: 'POST',
        data : $('#formID').serialize(),
        success: function(json) {
            alert('all done');
        }
    });
});

If you are not sending it with Ajax, why would you do this? If you are simply submitting the form, you can do it using PHP like this:

<?php
$json_object = json_decode($_POST);
?>

Solution 2

$('#formID').on('submit',function (e) {
    e.preventDefault();
    $.ajax({
        url: 'submit.php',
        cache: false,
        type: 'POST',
        data : $('#formID').serialize(),
        success: function(json) {
        alert('all done');
    }
    });
});

if you want not redirect or refresh use e.preventDefault();