sola.carol sola.carol - 1 year ago 68
HTML Question

How to create HTML dynamic to after create XML or JSON

I need to create a web page dynamic, where a layman User can enter information as if he were editing an XML or JSON, and after that need to convert this html in a json.

To convert html json already I found several examples using ajax for example, like this:

$.fn.serializeObject = function()
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[] !== undefined) {
if (!o[].push) {
o[] = [o[]];
o[].push(this.value || '');
} else {
o[] = this.value || '';
return o;

$(function() {
$('form').submit(function() {
return false;

But I have no idea if it's possible to make an html where the elements can be ordered as a JSON.

I found an example to create dynamic forms with Bootstrap like this:

The doubt is:
Sorting these elements to convert into a JSON?
How to know where will be an array or just a key-value set?

It is possible to create something?

Scenario: Today developers create a JSON to enter information into the system, we want commercial people can do this without knowing JSON with a friendly interface.

Thank you in advance!

Answer Source

You could try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test 1</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>

<script type="text/javascript">

 $(document).ready(function () {

function createTextBox(parent, name, value)
    var node = '<div class="node" id="node_'+name+'">'
                + '<input placeholder="" type="text" id="value_'+name+'" name="value_'+name+'"  value="'+value+'" />'
                + '<input placeholder="" type="text" id="value2_'+name+'" name="value2_'+name+'"  value="'+value+'" />'
                + '<input placeholder="" type="text" id="parent_'+name+'" name="parent_'+name+'" value="'+parent+'" />'
                + '<div id="nested_'+name+'" style="padding-left: 10%;" ><a href="#" onclick="addNested(this)" >ADD NESTED</a></div>'


function addNested(object)
    var name = getNewName();
    createTextBox(, name , name);

function getRandomName() {
    var ret;

    if (! {
        ret = function() { return new Date().getTime();
    } else {
        ret =;

    return ret;

function getNewName() {
    var ret = $("#count_campo").val();


    return ret;

function parse2Json()
    //pegando todos os elementos node
    $('.node').each(function(index, obj) {


       alert("Campo 1: Id["+$("#"'name') +"] Value["+$("#""]");       
       alert("Campo 2: Id["+$("#"'name') +"] Value["+$("#""]");  //     IGUAL ->  //var c = obj.childNodes[2].text;

        //getting all elements inside div
        var array =;

        array.forEach(function(objecto_filho) {
            alert("Dentro Foreach: "+;






    <input type="text" id="count_campo" name="count_campo" value="1" />

    <h1>Testes XML config</h1>
    <div id="formulario">


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download