Is there a more efficient way to map form elements to jSON string in a form submit?

Question

I am creating a mobile app which relies on jSON to submit forms to a database. I have my submit function:

function sendJson(service, method, json) {
    var request = $.ajax ({
        type: 'POST',
        url: '/remoteserver/service/' + service + '/' + method,
        dataType: 'json',
        async: false,
        data: JSON.stringify(json),
        success: function (msg) {
            alert('Success ' + JSON.stringify(msg.location));
        },
        error: function(msg) {
            alert('YOU SUCK' + JSON.stringify(msg));
        }
     });
}

and currently am using something like this to populate the jSON string:

$("element").click(function(){
    var wrapper = {};
    var location = {};
    wrapper.location = location;
    location.name = $('#name').val();
    location.address1 = $('#address1').val();
    location.address2 = $('#address2').val();
    location.city = $('#city').val();
    location.state = $('#state').val();
    location.country = $('#country').val();
    location.zipCode = $('#zipCode').val();
    location.contactName = $('#contactName').val();
    location.contactPhone = $('#contactPhone').val();
    sendJson("locationService", "createLocation", wrapper);    
});

My question is this - I will have somewhere near 100 forms in this app. How do I go about getting each jSON element(? - IE location.name) to map to the form field w/o having to explicitly state location.name = $('#name).val(); or is this how it's done in jSON? I have searched extensively and everything seems not suited to what Im trying to do. thank you.

I did not. I usually use the serialize function in the validation/submit routine. Haven't figured that out either for mobile. Unfortunately when I use .serialize it posts the data as such name=first+last&address=1234 etc, I need to have it submit in json — Dirty Bird Design, May 22 '13 at 19:56
But `.serialize()` will turn them into an URL encoded string which he will then have to unserialize so he can send it as a JSON string. — prodigitalson, May 22 '13 at 19:58
See this question: http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery — mccannf, May 22 '13 at 20:04

score 2 · Accepted Answer · edited May 23 '17 at 12:05

See Convert form data to JavaScript object with jQuery:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.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;
};

Now you can serialize it like this:

$('#YourFormID').serialzeObject();

Adil Shaikh · Answer 2 · 2013-05-22T20:05:54.380

1

You can use .serialize()

Encode a set of form elements as a string for submission.

So you can just do :

var data = $('#YourFormID').serialize();

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

edited May 22 '13 at 20:05

answered May 22 '13 at 19:57

Adil Shaikh

44,509
17
89
111

Hi pXL, please see my edited comment, it is URL encoding the string, I need to send it as a JSON string – Dirty Bird Design May 22 '13 at 20:00

Is there a more efficient way to map form elements to jSON string in a form submit?

2 Answers2