我正在尝试创建一个类来动态创建表单然后提交表单。这是一个简单的课程,但现在我迷失了方向。
var creathtml=function(){
this.createform=function(o,title){
var openingtag="<form action='#' class='form-horizontal well' onSubmit='this.submitform'><fieldset><legend>"+title+"</legend>";
var fields="";
for (var i=0; i<o.length; i++)
{
if(o[i].type=='input')
{
fields+="<div class='control-group'><label class='control-label' for='"+o[i].id+"'>"+o[i].label+"</label><div class='controls'><input type='"+o[i].subtype+"' id='"+o[i].id+"' class='"+o[i].class+"'></div></div>";
}
if(o[i].type=='button')
{
fields+="<div class='control-group'><div class='controls'><button type='"+o[i].subtype+"' id='"+o[i].id+"' class='"+o[i].class+"'>"+title+"</button></div></div>";
}
}
var closingtag="</fieldset></form>";
$(body).html (openingtag+fields+closingtag;
};
this.submitform=function()
{
console.log('mnmnmnmn');
return false;
}
}
用法
var obj= new creathtml;
var h=obj.createform([
{'type':'input','subtype':'input','name':'Wow','label':'Item Name','id':'itmname','class':''},
{'type':'input','subtype':'input','name':'hello','label':'Item Code','id':'hello','class':''},
{'type':'input','subtype':'input','name':'hello','label':'Item Code','id':'hello2','class':''},
{'type':'button','subtype':'submit','name':'submit','label':'Null','id':'submit','class':'btn btn-primary'}
],'Create New Items');
我已成功创建HTML并填充在DOM上。但是不知道如何检测表单提交或为这个特定的类创建submit方法?
这是我第一次尝试使用javascript OOP,所以如果做错了请尽可能建议正确的方法
答案 0 :(得分:0)
您已经检测到onSubmit='this.submitform'
的表单提交。此外,如果可能,您可能希望使用模板引擎。
由于您已经在使用jQuery,因此为表单提交添加一个监听器是理想的:
this.createform = function(o,title) {
...
for (var i=0; i<o.length; i++)
{
...
$('.' + o[i].formClass).on('submit', function() {
console.log('handle form submit here');
});
}
...
};