JS生成表单问题并持有form对象与在document中表单对象不符

[快乐的2]

// ***Apply useAjax,action,title,labels,properties,callback
var FormBox = function(config) {
	for (var item in config) {
		this[item] = config[item];
	}
	this.createBox();
};
FormBox.fn = FormBox.prototype = {
	init : function(config) {
		for (var item in config) {
			this[item] = config[item];
		}
		this.createBox();
	},

	show : function() {
		$(this.zheyan).show();
		$(this.table).show();
		this.showCenter($(document.body), $(this.table));
	},
	hide : function() {
		$(this.zheyan).hide();
		$(this.table).hide();
	},
	showCenter : function(contain, elem) {
		var coff = $(contain).offset();
		var cl = coff.left + $(contain).scrollLeft();
		var ct = coff.top + $(contain).scrollTop();
		var eoff = $(elem).offset();
		var el = ($(contain).width() - $(elem).width()) / 2 + cl;
		var et = ($(contain).height() - $(elem).height()) / 2 + cl;
		elem.offset({
					'left' : el,
					'top' : et
				});
	},
	submitFun : function() {
		if (this.useAjax === true) {
			if (this.callback) {
				this.callback({
							isSuccess : true
						});
			}
		} else {
			if (this.action === "undefined")
				return;
			this.form.submit();
			/*
			 * var inputs = $(this.table).find("input"); inputs =
			 * $(inputs).toArray();
			 * inputs.pop();inputs.pop();//移除Submit与cancel按钮 inputs = $(inputs);
			 * var params = new Array();
			 * 
			 * for(var i = 0; i < inputs.length; i++){ var tmp =
			 * $(inputs.get(i)); var p =
			 * window.encodeURI(tmp.attr("name")+"="+tmp.val()); params.push(p); }
			 * var paramStr = params.join("&"); var finalAction =
			 * this.action+"?"+paramStr; window.document.location=finalAction;
			 */
		}
	},
	createBox : function() {
		var zy = this.zheyan = $("<div></div>");
		zy.css("opacity", .4).css("z-index", 9998).css("background-color",
				"gray").css("position", "absolute").offset({
					left : 0,
					top : 0
				});
		zy.width($(document).width());
		zy.height($(document).height());
		zy.appendTo($(document.body));
		zy.hide();
		var form = this.form = $("<form action='" + this.action
				+ "' method='POST'></form>");
		var table = this.table = $("<table align='left'></table>");
		table.appendTo(form);
		var title = $("<tr><th colspan='2'>" + this.title + "</th></tr>");
		title.appendTo(table);
		table.css("z-index", 9999).css("background-color", "white").css(
				"position", "absolute");
		for (var i in this.properties) {
			var tm = this.properties[i];
			var tr = $("<tr></tr>");
			var td = $("<td></td>");
			var td2 = $("<td></td>");
			td.appendTo(tr), td2.appendTo(tr);
			if ($.isPlainObject(tm)) {
				var tmo = document.createElement("input");
				tmo.type = tm.type ? tm.type : "text";
				tmo = $(tmo);
				for (var j in tm) {
					tmo.attr(j, tm[j]);
				}
				if (this.labels != null) {
					if ($.isPlainObject(this.labels[i])) {
						if (this.labels[i].hide == true) {
							tr.css("display", "none");
							td.text(this.labels[i].label);
						} else {
							td.text(this.labels[i].label);
						}
					} else
						td.text(this.labels[i]);
				} else
					td.text(tm.name + ":");
			} else {
				var tmo = $("<input type='text' name='" + tm + "'>");
				if (this.labels != null) {
					if ($.isPlainObject(this.labels[i])) {
						if (this.labels[i].hide == true) {
							tr.css("display", "none");
							td.text(this.labels[i].label);
						} else {
							td.text(this.labels[i].label);
						}
					} else
						td.text(this.labels[i]);
				} else
					td.text(tm + ":");
			}
			tmo.appendTo(td2);
			tr.appendTo(table);
		}
		var tr = $("<tr></tr>");
		var td = $("<td colspan='2' align='center'></td>");
		td.appendTo(tr);
		var submit = $("<input type='button' value='Submit'>");
		submit.click(this.createCallBack(this.submitFun, this));
		var cancel = $("<input type='button' value='cancel'>");
		cancel.click(this.createCallBack(this.hide, this));
		submit.appendTo(td);
		cancel.appendTo(td);
		tr.appendTo(table);
		table.hide();
		form.appendTo($(document.body));
		this.form = $(form,document.body);//表单对象
	},
	createCallBack : function(fun, scope) {
		return function() {
			scope.call_back_func = fun;
			scope.call_back_func();
		};
	}
};
var formBox = FormBox;

<html>
<head>
<!--测试代码-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/formBox.js"></script>
<script type="text/javascript">
//使用方式
	var esbSystemConfig = {
		title : "ESB对象更新",
		properties : [ {
			name : "pid",
			type : "hidden",
			value : ""
		},{
			name : "xtpid",
			type : "hidden",
			value : ""
		}, "dxmc", "dxms" ],
		labels:[
			{hide:true},{hide:true},"对象名称","对象描述"
		],
		action:"updateEsbObject.do",
		useAjax:false,
		callback : function(data) {
			if (data.isSuccess) {
				alert("更新成功!");
			} else
				alert("更新失败!\r\n" + data.errorMessage);
			per_form.hide();
		}
	};
	var per_form;
	function createForm(obj) {
		if ($(obj).attr("esbpid") != null) {
			esbSystemConfig.properties[0].value = $(obj).attr("esbpid");
			esbSystemConfig.properties[1].value = $(obj).attr("esbxtpid");
			per_form = new formBox(esbSystemConfig);
			per_form.show();
			alert(per_form.form.length);//1
			alert(document.forms[0].length);//6
			//怎么设置才能让per_form.form与实际在document中的form是同一个对象?
		} else
			alert("ERROR!");
	}
</script>
</head>
<body>
<a href="#" esbpid="1" onclick="createForm(this)">点击我</a>
<br/>
<br/>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/>
</body>
</html>

[快乐的2]

对象内部的form长度为1，而从document中取出的form长度就是6了.
两个长度不一样怎么照成的?

[kaifadi]

有点复杂，看着有点晕！不是很明白，什么叫FORM对象与DOCUMENT对象的FORM长度区别！

[快乐的2]

form标签内有input,
在js中生成的from,想form中添加了4个input两个button,form.length应该=6
结果JS的formBox中form中一个input元素都没有.
而用fireDebug从document中取出的这个form中有6个input元素.

就这么回事,怎么能让他俩为同一个form.

[孟子E章]

有没有东西，你form.innerHTML就能看出来了。
另外
form.elements.length是表单的元素

[Cool_xiaocao]

一大段代码，看得眼都花了

[孟子E章]

啥叫不符？

form标记是不能嵌套的。不管采用什么方法生成的，都要遵守这一点