innerHTML中表单值不刷新在IE和火狐以及在在火狐当中outerHTML的解决方法

最近在做网站，由于不同类型的产品的参数不同，所以就用起将这些参数放到同一个字段中去（实在找不到其他的解决办法了，如果要为每个参数都建个字段，那产品表至少有200~300个字段）。页面上的解决办法是：将这些参数做成表格（里面有相应的表单），放到“产品类型”表中去。当添加这个产品时，根据用户选择的产品类型，调出不同的表格。所以在添加产品的时候，需要将这些表格显示到一个DIV中，提交的时候，使用javascript将这个div赋值给一个隐藏的表单，最后一起提交给数据库。
如下：

代码

< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< form  name ="form1"  method ="post"  action ="1.asp" >
< div  id ="aaa" >
< table  width ="200"  border ="0"  cellspacing ="0"  cellpadding ="0" >
< tr >
< td > ddd </ td >
< td >< input  name ="textfield"  type ="text"  id ="textfield"  size ="10"   /></ td >
</ tr >
< tr >
< td > ddd1 </ td >
< td >< input  name ="textfield2"  type ="text"  id ="textfield2"  size ="10"   /></ td >
</ tr >
< tr >
< td > eee </ td >
< td >< input  name ="textfield3"  type ="text"  id ="textfield3"  size ="10"   /></ td >
</ tr >  
</ table >
</ div >
</ FORM >
< script  language ="javascript" >
function  f()
{
document.getElementById( " a " ).value = document.getElementById( " aaa " ).innerHTML;
}
</ script >
< input  type ="button"  name ="button"  id ="button"  value ="提交"  onClick ="f()"   />
< br  />
< textarea  name ="a"  cols ="40"  rows ="5"  id ="a" ></ textarea >
</ FORM >

 

 

这段代码在IE下一点问题都没有，你拿到火狐中运行一下看看。当在表单中输入内容时，再点击提交看看火狐能不能获取到输入到表单中的值。

为了找解决办法，发贴到csdn中去，得到朋友们的帮助，才知道这是火狐的一个BUG，这样是不能实现的。最后在另一个地方找到了答案。需要在文本框中失去焦点的时候，使用js给文本框赋值（this.setAttribute('value',this.value);）。
由于这个页面中的文本框的数量是不固定的，所以想起来使用jquery给所有文本都添加js给文件框赋值。

 

代码

< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< FORM  name ="form1"  method ="post"  action ="1.asp" >
< div  id ="aaa" >
< table  width ="200"  border ="0"  cellspacing ="0"  cellpadding ="0" >
< tr >
< td > ddd </ td >
< td >< input  name ="textfield"  type ="text"  id ="textfield"  size ="10"   /></ td >
</ tr >
< tr >
< td > ddd1 </ td >
< td >< input  name ="textfield2"  type ="text"  id ="textfield2"  size ="10"   /></ td >
</ tr >
< tr >
< td > eee </ td >
< td >< input  name ="textfield3"  type ="text"  id ="textfield3"  size ="10"   /></ td >
</ tr >  
</ table >
</ div >
</ FORM >
< script  language ="javascript"  src ="http://www.aspprogram.cn/js/jquery.js" ></ script >
< script >
$( " input " ).blur( function (){
this .setAttribute( ' value ' , this .value);
});  
</ script >
< script  language ="javascript" >
function  f()
{
document.getElementById( " a " ).value = document.getElementById( " aaa " ).innerHTML;
}
</ script >
< input  type ="button"  name ="button"  id ="button"  value ="提交"  onClick ="f()"   />
< br  />
< textarea  name ="a"  cols ="40"  rows ="5"  id ="a" ></ textarea >

 

 

再运行一下这段代码看看，是不是解决了？最后提交到数据库中的方法，写到action中的1.asp就可以了

原创文章：转载请注明来自：http://www.aspprogram.cn/ ，谢谢

 

 

 

2.  在火狐当中outerHTML的解决办法：

直接把以下段码插入到head当中

<!--
if(typeof(HTMLElement)!="undefined" && !window.opera)
{
HTMLElement.prototype.__defineGetter__("outerHTML",function()
{
var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)
if(a[i].specified) str+=" "+a[i].name+'="'+a[i].value+'"';
if(!this.canHaveChildren) return str+" />";
return str+">"+this.innerHTML+"</"+this.tagName+">";
});
HTMLElement.prototype.__defineSetter__("outerHTML",function(s)
{
var d = document.createElement("DIV"); d.innerHTML = s;
for(var i=0; i<d.childNodes.length; i++)
this.parentNode.insertBefore(d.childNodes[i], this);
this.parentNode.removeChild(this);
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function()
{
return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
});
}
//-->