/* [0] On efface le =========================================================*/ document.body.innerHTML = ''; "use strict"; var default_definition = { 'input': { node_type: 'input' }, '/^h([1-6])$/': { node_type: 'h{$1}' }, 'br': { node_type: 'br' }, 'option': { node_type: 'option' }, 'select': { node_type: 'select' }, 'span': { node_type: 'span' } }; var custom_definition = { '/^input\.([a-z]+)$/': { node: 'input', attributes: { 'type': '{$1}', 'data-name': '{name}', 'value': '{value}', 'placeholder': '{placeholder}' }, next_nodes: [{ node: 'br' }] }, 'custom-select': { node: 'span', attributes: { 'class': 'select-container nobold' }, children: [ { node: 'select', attributes: { 'data-name': '{name}' }, children: [ { node: 'option', attribute: { value: '{options.value}' }, text: '{options.value}', repeat: '{{options}}' } ] } ], next_nodes: [{ node: 'br' }] } }; var form = { node: 'h4', attributes: { 'data-icon': 'o', 'class': 'new-contact color2' }, children: [ { node: 'input.hidden', $name: 'uid', $value: '{uid}' }, { node: 'input.hidden', $name: 'call', $value: '{call}' }, { node: 'input.hidden', $name: 'sms', $value: '{sms}' }, { node: 'input.hidden', $name: 'countcall', $value: '{countcall}' }, { node: 'input.hidden', $name: 'countsms', $value: '{countsms}' }, { node: 'input.hidden', $name: 'total', $value: '{countcall} calls + {countsms} sms to {number}' }, { node: 'input.text', $name: 'number', $value: '{number}' }, { node: 'custom-select', $name: 'existing', $$options: '{{options}}' } ] }; var fb = new FormBuilder(form); fb.add_definition(default_definition); fb.add_definition(custom_definition); fb.build({ uid: 1, call: 2, sms: 3, countcall: 4, countsms: 5, number: '01 02 03 04 05', options: ['a', 'b', 'c', 'd'] }); console.log(fb.built_form);