87,992
社区成员
发帖
与我相关
我的任务
分享js如何获取form表单源码及表单元素状态？
遇到超级复杂的表单需要提交，超过300个元素 
换个思路，干脆整个页面全部入库，仅将需要索引或查询的重要字段作为数据库的列进行入库，其他表单部分包括源码全部入数据库大对象。
页面源代码好获取，但是form表单中各个表单元素的状态就搞不定了，比如input框中输入的值或者select选中哪一个，用jquery返回页面源码根本不会包含表单元素的实际状态。
谁有类似遭遇，能否告知解决方法。
换个思路，干脆整个页面全部入库，仅将需要索引或查询的重要字段作为数据库的列进行入库，其他表单部分包括源码全部入数据库大对象。
页面源代码好获取，但是form表单中各个表单元素的状态就搞不定了，比如input框中输入的值或者select选中哪一个，用jquery返回页面源码根本不会包含表单元素的实际状态。
谁有类似遭遇，能否告知解决方法。
...全文
请发表友善的回复…
发表回复
fzfei2 2013-08-16
- 打赏
- 举报
select好像不行，怎么样让opction选中？感谢！[/quote]
<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>
u010754200 2013-08-16
- 打赏
- 举报
您这个解决了select的问题了么？我测试了好像还是不行啊
u010754200 2013-08-16
- 打赏
- 举报
select好像不行，怎么样让opction选中？感谢！
未知数 2013-08-14
- 打赏
- 举报
存源码到数据库？
你也不怕别人用注入手段或控制台将js节点注入到你的表单然后提交？找死的方法
写表单项有那么辛苦么？实在觉得麻烦用js循环不就行了，数据库中所有表单值特殊符号分隔，发到页面解析，jquery筛出所有表单项，循环赋值，就搞定了
王小葱 2013-08-14
- 打赏
- 举报
$_POST 可以获取所有form提交值存入一个数组，只需要将这个数组插入数据库
似梦飞花 2013-08-14
- 打赏
- 举报
你是怎么把整个页面存到数据库的？
你存之前看下存的源码
斯洛文尼亚旅游 2013-08-14
- 打赏
- 举报
标准浏览器innerHTML返回的是直接查看源代码得到的，而不是修改过后的，这个IE反倒能通过innerHTML反应修改后的，
select增加value属性后并不能选中option，设置select option的selected属性innerHTML也返回不了selected。。悲剧。。
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>fzfei2 2013-08-14
- 打赏
- 举报
加了 radio ，checkbox 处理
function getHtml(){
$('#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() );
}
u010754200 2013-08-14
- 打赏
- 举报
测试了一下基本可行，就是input类型中radio有问题，这个咋整？感谢！
我是被逼无奈才这么存储数据，页面元素太多了，国家搞得什么XX调查表，巨大无比，我把关键字段抽取出来单独存储，作为索引和查询用.
fzfei2 2013-08-13
- 打赏
- 举报
换个思路，干脆整个页面全部入库 
你最好还是存数据吧，你这一堆HTML存到数据里，数据的意义就不大了
---------------------
你的意思是这样吧
你最好还是存数据吧，你这一堆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>
街头小贩 2013-08-13
- 打赏
- 举报
