Generating JSON from the form

Question

I want to generate JSON data like

{
    "first_name": "fname",
    "last_name": "lname",
    "zip": "123456",
    "subjects": [
        {
            "name": "bee"
        },
        {
            "name": "ms"
        },
        {
            "name": "edc"
        }
    ]
}

from the following form

 <form action="" method="post">
    first Name:<input type="text" name="first_name"/> <br/>
    last name:<input type="text" name="last_name"/> <br/>
    Widget URL:<input type="text" name="zip" /> <br/>

    Support:<br/>
    span3:<input type="checkbox" name="name" value="bee"/><br/>
    span6:<input type="checkbox" name="name" value="ms"/><br/>
    span12:<input type="checkbox" name="name" value="edc"/><br/>

    <p><input type="submit" /></p>
</form>

using jquery. Is is this form structure correct for the following JSON structure? I need the script to prompt the json to the user

score 2 · Answer 1 · answered May 16 '13 at 07:52

2

You will need to stringify your data using

https://github.com/douglascrockford/JSON-js

 var data = {};
    data["first_name"] = $('input[name="first_name"]').val();
    data["last_name"] = $('input[name="last_name"]').val();

    console.log(data);
    alert(JSON.stringify(data));

The jsfiddle http://jsfiddle.net/gfmU4/2/

answered May 16 '13 at 07:52

drhanlau

2,517
2
24
42

depending on the scenario, you can use $("input") to grab all the input and match the name attribute with the val() – drhanlau May 16 '13 at 07:59

score 2 · Accepted Answer · answered May 16 '13 at 08:21

You can use php instead to output JSON format to user after submitting the form.

Use

<?php echo json_encode($_POST); ?>

Or if you really need to use jQuery. Use the code below:

<form action="" method="post">
first Name:<input type="text" name="first_name"/> <br/>
last name:<input type="text" name="last_name"/> <br/>
Widget URL:<input type="text" name="zip"/> <br/>

Support:<br/>
span3:<input type="checkbox" name="subjects" value="bee"/><br/>
span6:<input type="checkbox" name="subjects" value="ms"/><br/>
span12:<input type="checkbox" name="subjects" value="edc"/><br/>

<p><input type="button" id="btnsubmit" value="submit"/></p>
</form>
<pre id="json_output"></pre>

And the jquery code would be :

$(document).ready(function(){

    var formObject = {};

    $('#btnsubmit').click(function(){

       var formInputString = $('form').serialize();
       var inputParameters = formInputString.split('&');
       var nameValues = [];
        $.each(inputParameters,function(i){
            var inputParameter = inputParameters[i].split('='); // 0 - keyName , 1 - keyValue
            var keyName = inputParameter[0];
            var keyValue = inputParameter[1];
            if(keyName == 'subjects'){
                nameValues.push({ name : keyValue});
                formObject[keyName] = nameValues;
            }else{
                formObject[keyName] = keyValue;
            }

        });

        var myString = JSON.stringify(formObject);

        $('#json_output').text(myString);
    });

});

Try it here : http://jsfiddle.net/XGFg6/

score 0 · Answer 3 · answered May 16 '13 at 08:30

0

There is a plugin which works the same way as jQuery build-in serializeArray function

jQuery.serializeObject

$('form').serializeObject();

answered May 16 '13 at 08:30

Dmitry Demidenko

3,427
1
22
22

Generating JSON from the form

3 Answers3