遇到超级复杂的表单需要提交,超过300个元素 换个思路,干脆整个页面全部入库,仅将需要索引或查询的重要字段作为数据库的列进行入库,其他表单部分包括源码全部入数据库大对象。页面源代码好获取,但是form表单中各个表单元素的状态就搞不定了,比如input框中输入的值或者select选中哪一个,用jquery返回页面源码根本不会包含表单元素的实际状态。谁有类似遭遇,能否告知解决方法。JavaScriptform表单
调试欢乐多
你最好还是存数据吧,你这一堆HTML存到数据里,数据的意义就不大了
---------------------
你的意思是这样吧 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<form id="f1">
<input id="t1" >
<select id="s1">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
</form>
<button onclick="getHtml()">get</button><script>
function getHtml(){
///////添加测试测试值/////
$('#t1').val('12345');
$('#s1').val(2);
/////////////
$('#f1 input,select').map(function(){
this.setAttribute('value',this.value)
}); alert( $('#f1').html() );
}
</script>
你也不怕别人用注入手段或控制台将js节点注入到你的表单然后提交?找死的方法
写表单项有那么辛苦么?实在觉得麻烦用js循环不就行了,数据库中所有表单值特殊符号分隔,发到页面解析,jquery筛出所有表单项,循环赋值,就搞定了
$('#f1 input,select').map(function(){
this.setAttribute('value',this.value);
});
$(':radio,:checkbox').map(function(){
this[(this.checked?'set': 'remove')+'Attribute']('checked',1);
});
alert( $('#f1').html() );
}
<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>
select好像不行,怎么样让opction选中?感谢!
您这个解决了select的问题了么?我测试了好像还是不行啊
select好像不行,怎么样让opction选中?感谢!<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>