javascript - 如何从 json 字段数组动态创建没有 jquery 的表单？

Question

我想从 json 字段数组创建一个表单，并让它在提交时调用回调。

例如，我想要如下所示的内容，它将创建一个包含 3 个字段的表单，并在单击提交时调用 onSubmitCallback。

<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>

有这样做的例子吗？

Answer 1

以下内容将实现您想要的效果 - 在大约 30 分钟内完成，因此您的结果可能会有所不同!

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();