js如何获取form表单源码及表单元素状态？
遇到超级复杂的表单需要提交，超过300个元素 
换个思路，干脆整个页面全部入库，仅将需要索引或查询的重要字段作为数据库的列进行入库，其他表单部分包括源码全部入数据库大对象。
页面源代码好获取，但是form表单中各个表单元素的状态就搞不定了，比如input框中输入的值或者select选中哪一个，用jquery返回页面源码根本不会包含表单元素的实际状态。
谁有类似遭遇，能否告知解决方法。
select增加value属性后并不能选中option，设置select option的selected属性innerHTML也返回不了selected。。悲剧。。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<form id="f1">
<input type="text">
<select multiple id="ss">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="radio" name="r1" value="1"/>
<input type="radio" name="r1" value="2" />
<input type="radio" name="r1" value="3" checked />
<input type="checkbox" value="1"/>
<input type="checkbox" value="2"/>
<input type="checkbox" value="3"/>
<textarea ></textarea>
</form>
<button onclick="alert(getHtml(true))">获取表单innerHTML</button>
<button onclick="setHTML()">设置div的innerHTML，不做处理</button>
<button onclick="setHTML(true)">设置div的innerHTML，处理数据并且设置状态</button>
<div id="dv"></div>
<script>
function setHTML(process) {
$('#dv').html(getHtml(process));
if (!window.ActiveXObject && process) {
var arr, selector = '',i;
$('#dv option[selectedx]').each(function () {
$(this).attr('selected', true);
});
//textarea有value属性没用，不会显示在输入框内，需要用js设置过value属性一次
$('#dv textarea').each(function () {
$(this).val(this.getAttribute('value'));
});
}
}
function getHtml(process) {
if (window.ActiveXObject
[解决办法]
!process) return $('#f1').html();
else {
$($('#f1')[0].elements).each(function () {
switch (this.tagName) {
case 'INPUT':
case 'TEXTAREA':
switch (this.type) {
case 'radio':
case 'checkbox':
if (this.checked) this.setAttribute('checked', true);
else this.removeAttribute('checked');
break;
default:
this.setAttribute('value', this.value);
}
break;
case 'SELECT':
$('option', this).removeAttr('selectedx').not(':selected').removeAttr('selected').end().filter(':selected').attr('selectedx', 'selected');
break;
}
});
return $('#f1').html();
}
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<form id="f1">
<input type="text">
<select multiple id="ss">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="radio" name="r1" value="1"/>
<input type="radio" name="r1" value="2" />
<input type="radio" name="r1" value="3" checked />
<input type="checkbox" value="1"/>
<input type="checkbox" value="2"/>
<input type="checkbox" value="3"/>
<textarea ></textarea>
</form>
<button onclick="getHtml()">获取表单innerHTML</button>
<div id="dv"></div>
<script>
function getHtml(id){
var f=$('#f1');
f.find(':text,select').map(function(){
this.setAttribute('value',this.value);
});
f.find('textarea').each(function(){
this.innerHTML=this.value;
});
$(':radio,:checkbox,').map(function(){
this[(this.checked?'set': 'remove')+'Attribute']('checked',1);
});
f.find('option').each(function(){
this[(this.selected?'set': 'remove')+'Attribute']('selected',1);
});
$('#dv').html( f.html() );
return f.html();
}
</script>
