js如何获取form表单源码及表单元素状态? 遇到超级复杂的表单需要提交,超过300个元素 换个思路,干脆整个页面全部入库,仅将需要索引或查询的重要字段作为数据库的列进行入库,其他表单部分包括源码全部入数据库大对象。页面源代码好获取,但是form表单中各个表单元素的状态就搞不定了,比如input框中输入的值或者select选中哪一个,用jquery返回页面源码根本不会包含表单元素的实际状态。谁有类似遭遇,能否告知解决方法。JavaScriptform表单 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 换个思路,干脆整个页面全部入库 你最好还是存数据吧,你这一堆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> $_POST 可以获取所有form提交值存入一个数组,只需要将这个数组插入数据库 存源码到数据库?你也不怕别人用注入手段或控制台将js节点注入到你的表单然后提交?找死的方法写表单项有那么辛苦么?实在觉得麻烦用js循环不就行了,数据库中所有表单值特殊符号分隔,发到页面解析,jquery筛出所有表单项,循环赋值,就搞定了 测试了一下基本可行,就是input类型中radio有问题,这个咋整?感谢!我是被逼无奈才这么存储数据,页面元素太多了,国家搞得什么XX调查表,巨大无比,我把关键字段抽取出来单独存储,作为索引和查询用. 加了 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() ); } 标准浏览器innerHTML返回的是直接查看源代码得到的,而不是修改过后的,这个IE反倒能通过innerHTML反应修改后的,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> 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> 通过javascript控制option属性的样式问题 一个简单的JS兼容问题。 js获取循环变量的问题 为什么alert('\u5408\u8ba1');可以得到汉字,而alert(a.value);却不能得到汉字呢? 如果用frame打开任意网页,可以从frame得到网页的dom树,进而操作里面的页面吗? 如何用正则表达式过滤一个字符串中所有的回车符啊,在线给分 下拉列表是如和锁死的 一个小问题。。 javascript如何实现在客户端弹出一输入框,让用户输入?(yancey) 关于js语法问题,大神请进! ashx 数据返回得不到数据 js 参数传递
你最好还是存数据吧,你这一堆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>