Add dynamically generated input fields into a JSON object with JQuery

Question

Users can create any number of input fields and on save the values are saved as a JSON and sent to the server.

I can't add these user generated input field values into the JSON format and I get no output result of the JSON.

I'm doing it as below:

$(function () { 
$(document).on('click', '.send', function (e) {
    var dataGroup = [];
    $('.form-group').each(function () {
        var emailData = {};
        $(this).find(':input[data-name]').each(function () {
            emailData[$(this).emailData('name')] = this.value
        });
        dataGroup.push(emailData);
    });      

           $('#result').val(JSON.stringify(dataGroup))
 });
});

This is the JSFiddle. How can you add each input field into the JSON?

No I mean I provided you the solution in that fiddle. Its not perfect but you'll get a idea — Rahil Wazir
– Rahil Wazir, Commented Aug 31, 2014 at 11:50

Semyon Krotkih · Accepted Answer · 2014-08-31 11:49:44Z

2

See the updated fiddle http://jsfiddle.net/9Lhpo8pL/21/ There was a couple of things:

The data attribute should be addressed like this $(this).data('name') instead of $(this).emailData('name')
'send' is an ID, not a class
The text area has #output id, not #result

answered Aug 31, 2014 at 11:49

Semyon Krotkih

1494 bronze badges

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

Collectives™ on Stack Overflow

Add dynamically generated input fields into a JSON object with JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related