How can I dynamically create a form WITHOUT jquery from a json field array?

Question

I'd like to create a form from a json array of fields, and have it call a callback on submit.

For example, I'd like something like the following, that would create a form with 3 fields, and call the onSubmitCallback when submit was clicked.

<script type="text/javascript">

  var fc = new FormCreator({
    owner: document.body,
    fields: [
      {'name':'name', 'title':'name', 'value':'test'},
      {'name':'last_day', 'title':'last day', 'value':'test asdfas fdj'},
      {'name':'ez', 'title':'how', 'value':'test asdf'}
    ],
    config: {
      firstColWidth:'200px'
    },
    onSubmitCallback: function(data, form){
      console.log(data);
      return false;
    }
  });

</script>

Are there any examples out there for doing this?

Answer 1

The following will do what you want - whipped together in about 30 min, so your results may vary!

function FormCreator(options){
  this.options = options;
  this.createForm();
}

FormCreator.prototype.getFormValues = function(form)
{
  var result = {};
  for ( var i = 0; i < form.elements.length; i++ ) {
     var e = form.elements[i];
     if (e.type != "text") 
     {
       continue;
     }
     result[e.name] = e.value;
  }
  return result;
}

FormCreator.prototype.addFormField = function(form, type, key, value)
{
  var field = document.createElement("input");
  field.setAttribute("type", type);
  field.setAttribute("name", key);
  field.setAttribute("value", value);

  form.appendChild(field);
}

FormCreator.prototype.createForm = function()
{
  var form = document.createElement('form');

  this.form = form;

  for (var i=0; i < this.options.fields.length; i++)
  {
    var field = this.options.fields[i];

    var label = document.createElement('span');
    var width = this.options.config.firstColWidth || '100px';
    label.style.cssText = 'min-width:' + width + ' !important; display: inline-block';
    var t = document.createTextNode(field.title || field.name);
    label.appendChild(t);
    form.appendChild(label);
    this.addFormField(form, 'text', field.name, field.value);

    var br = document.createElement('br');
    form.appendChild(br);
  }

  var me = this;
  form.onsubmit = function( e ) {
     e = e || window.event;
     if (! me.options.onSubmitCallback)
     {
       return false;
     }

     var data = me.getFormValues(form);
     var result = me.options.onSubmitCallback(data, form);
     if (result === undefined)
     {
       result = false;
     }
     return result;
  };

  this.options.owner.appendChild(form);
  this.addFormField(form, 'submit', 'submit', 'Submit');
  this.addFormField(form, 'reset', 'reset', 'Reset');
}

function test(){
  var fh = new FormCreator({
    owner: document.body,
    fields: [
      {'name':'name', 'title':'name', 'value':'test'},
      {'name':'last_day', 'title':'last day', 'value':'test \'asdfas\' fdj'},
      {'name':'ez', 'title':'how', 'value':'test "asdf'}
    ],
    config: {
      firstColWidth:'200px'
    },
    onSubmitCallback: function(data, form){
      alert("Data received. Look in console for results!");
      
      console.log(data);
      
      return false;
    }
  });
}

test();