当前位置:asp编程网>技术教程>Javascript教程>  正文

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

2009-12-06 08:19:24   来源:aspprogram.cn    作者:wangsdong   浏览量:2298   收藏

最近在做网站,由于不同类型的产品的参数不同,所以就用起将这些参数放到同一个字段中去(实在找不到其他的解决办法了,如果要为每个参数都建个字段,那产品表至少有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就可以了

原创文章:转载请注明来自:www.aspbc.com ,谢谢



关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网