如何從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();