纯JS回显form各种表单数据

来源：互联网发布：paxos算法实现编辑：程序博客网时间：2024/05/21 18:59

获取和设定表单数据有各种方法，比如借助DWR，JQuery等JS库或者框架等。

下面通过原生的JS代码来实现。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>表单数据的回显</title><script type="text/javascript">function show(){//姓名var name=document.getElementById("name").value;document.getElementById("name2").value=name;//性别var genders=document.getElementsByName("gender");//var genders=document.testform.gender;//这样取值也可以var checkedgender;for(var i=0;i<genders.length;i++){if(genders[i].checked){checkedgender=genders[i].value;break;}}var genders2=document.getElementsByName("gender2");for(var i=0;i<genders2.length;i++){if(checkedgender==genders2[i].value){genders2[i].checked=true;break;}}//学历var xue=document.getElementById("select").options;var checkedxue;for(var i=0;i<xue.length;i++){if(xue[i].selected){checkedxue=xue[i].value;break;}}var xue2=document.getElementById("select2").options;for(var i=0;i<xue2.length;i++){if(checkedxue==xue2[i].value){xue2[i].selected=true;break;}}//技能var its=document.getElementsByName("it");var checkedit=new Array();for(var i=0;i<its.length;i++){if(its[i].checked){checkedit.push(its[i].value);}}var its2=document.getElementsByName("it2");for(var i=0;i<its2.length;i++){if(checkedit.length==0){its2[i].checked=false;}else{for(var j=0;j<checkedit.length;j++){if(checkedit[j]==its2[i].value){its2[i].checked=true;break;}else{its2[i].checked=false;//必须设为false，否则重新选择后，还会处于选中状态}}}}//自我介绍var text=document.getElementById("intro").value;document.getElementById("intro2").value=text;}</script></head><body><form name="testform">姓名：<input type="text" name="name" id="name" value="hello"/><br/>性别：<input type="radio" name="gender" value="man" checked/>男    <input type="radio" name="gender" value="woman"/>女    <input type="radio" name="gender" value="secret"/>保密<br/>学历：<select id="select">    <option value="college">专科</option>    <option value="bachelor" selected>本科</option>    <option value="master">硕士</option>    <option value="doctor">博士</option>   </select><br/>技能：<input type="checkbox" name="it" value="java"/>java<input type="checkbox" name="it" value="c" checked/>C<input type="checkbox" name="it" value="php"/>php<input type="checkbox" name="it" value="linux" checked/>linux<br/>自我介绍：<br/><textarea rows="4" cols="20" id="intro">hi,大家好</textarea><br/><input type="reset" value="重置"/><input type="button" value="数据回显" onclick="show()"/></form><hr>姓名：<input type="text" name="name" id="name2" /><br/>性别：<input type="radio" name="gender2" value="man"/>男    <input type="radio" name="gender2" value="woman"/>女    <input type="radio" name="gender2" value="secret"/>保密<br/>学历：<select id="select2">    <option value="college">专科</option>    <option value="bachelor">本科</option>    <option value="master">硕士</option>    <option value="doctor">博士</option>   </select><br/>技能：<input type="checkbox" name="it2" value="java"/>java<input type="checkbox" name="it2" value="c"/>C<input type="checkbox" name="it2" value="php"/>php<input type="checkbox" name="it2" value="linux"/>linux<br/>自我介绍：<br/><textarea rows="4" cols="20" id="intro2"></textarea><br/></body></html>

效果图如下：

注意点：除下拉选择框选中用 selected 属性判断外，单选框，复选框都是用 checked 进行判断的。复选框取值时用到了Array对象的push方法。

经测试，IE，firefox，chrome下均通过。

0 0