如何从json字段数组动态创建一个没有jquery的表单

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

本文关键字：一个 表单 jquery json 字段 数组 创建 动态      更新时间：2023-09-26

我想从字段的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>

有这样的例子吗？

以下内容将满足您的需要-在大约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();

相关文章：