dedecms模板留言板js拓展开发

dedecms模板留言板js拓展开发

官方的dedecms留言板模板可以接受的留言信息比较少,只有昵称、emai、QQ、留言内容等少数几个字段。

怎样实现dedecms留言板功能的扩展。增加留言字段呢？

这里介绍的方式，采用js方式，轻松的实现了留言字段的扩展。

这里提供一个相对完整的dedecms留言板表单。

<form action="/plus/guestbook.php" onSubmit="return check_mess_info()" name="form1" id="messform"  method="post">
<input type='hidden' name='action' value='save' />
<!--mess_main-->
<div id="mess_main">
<div class="mess_list">
 <div class="mess_title">正文</div><div class="mess_textarea"><textarea name="msg" id="mess_message_" rows="6" cols="36" value=''></textarea></div>
</div>
<table border=0 align=center cellpadding=10 cellspacing=0 width=98% class="form" style=" margin:0 auto ">
<tbody>
<tr><td width=20%>单位名称</td><td><input id='uname' type='text' size='80' name='uname' value='<?php echo $g_name; ?>' />*</td></tr>
<tr><td width=20%>地址</td><td><input id='f2' type='text' name='f2' size='80' value=''/></td></tr>
<tr><td width=20%>公司地址</td><td><input id='f3' type='text' name='f3' size='80' value=''/></td></tr>
<tr><td width=20%>邮政编码</td><td><input id='f4' type='text' name='f4' size='80' value=''/></td></tr>
<tr><td width=20%>E-mail</td><td><input id='f5' type='text' name='f5' size='80' value=''/></td></tr>
<tr><td width=20%>电话</td><td><input id='f6' type='text' name='f6' size='80' value=''/></td></tr>
<tr><td width=20%>传真</td><td><input id='f7' type='text' name='f7' size='80' value=''/></td></tr>
<tr><td width=20%>联系人</td><td><input id='f8' type='text' name='f8' size='80' value=''/></td></tr>
<tr><td width=20%>职务</td><td><input id='f9' type='text' name='f9' size='80' value=''/></td></tr>
<tr><td width=20%>展品名称（中文）</td><td><input id='f10' type='text' name='f10' size='80' value=''/></td></tr>
<tr><td colspan="2"><strong>展品范围</strong></td></tr>
<tr><td colspan="2"><table cellspacing="0">
  <tr>
      <td><input type='checkbox' name='f11' value='数控机床与金属加工展'  /> 数控机床与金属加工展<div style="display:none">展品大类：金属切削机床、金属成形机床、特种加工机床、数控系统、数显装置和机床电器、机床零部件及辅助设备、磨料磨具、刀具、工夹具及相关产品、检验和测量设备</div></td>
      </tr>
    <tr>
      <td><input type='checkbox' name='f11' value='工业自动化展'  /> 工业自动化展<div style="display:none">展品大类：生产自动化、过程自动化、机器人技术、电气系统、工业自动化信息技术及软件、微系统技术</div></td>
      </tr>
    <tr>
      <td><input type='checkbox' name='f11' value='环保技术与设备展'  /> 环保技术与设备展<div style="display:none">展品大类：废弃物处理和回收利用技术与设备、水处理技术与设备、循环经济及资源综合利用、交通节能技术与设备、新能源技术与设备、建筑节能</div></td>
      </tr>
    <tr>
      <td><input type='checkbox' name='f11' value='信息与通信技术应用展'  /> 信息与通信技术应用展（城市LED照明与新型显示展）<div style="display:none">展品大类：通信及网络产品、集成电路及电子元器件、计算机软硬件及推广应用、信息安全、电源及相关产品、显示及视听产品、半导体照明</div></td>
      </tr>
    <tr>
      <td><input type='checkbox' name='f11' value='新能源与电力电工展'  />  新能源与电力电工展<div style="display:none">展品大类：新能源技术及设备、发电设备、电力电工技术、电力测控仪器、电气自动化技术与设备、输电、配电设备及附件</div></td>
      </tr>
    <tr>
      <td><input type='checkbox' name='f11' value='科技创新展'  /> 科技创新展<div style="display:none">展品大类：设企业与科、教等系统两个板块、主要展出企业、科研机构和大专院校的科技创新成果</div></td>
      </tr>
    <tr>
      <td><input type='checkbox' name='f11' value='新能源汽车展'  />  新能源汽车展<div style="display:none">展品大类：交易、展示 混合动力汽车、电动汽车、燃料电池汽车等新能源汽车、驱动系统、充电设施、相关零部件、汽车设计</div></td>
      </tr>
    <tr>
      <td colspan="3"><input type='checkbox' name='f11' value='航空航天技术展（航空航天技术展为双年展，逢单年举办）' /> 航空航天技术展（航空航天技术展为双年展，逢单年举办）</td>    
      </tr>
      </table></td></tr>
<tr>
  <td colspan="2"><strong>公司性质</strong></td>
  </tr>
<tr><td colspan="2"><table cellspacing="0">
  <tr>
      <td><input name='f12' type='radio'  value='国营企业'  checked="checked"  /> 国营企业</td>
      <td><input name='f12' type='radio'  value='民营企业'  /> 民营企业 </td>
      <td><input name='f12' type='radio'  value='中外合资/合作企业'  /> 中外合资/合作企业</td>
      <td><input name='f12' type='radio'  value='代理国际品牌的内资企业'  /> 代理国际品牌的内资企业</td>
      </tr>
    <tr>
      <td><input name='f12' type='radio'  value='港澳台企业'  /> 港澳台企业</td>
      <td><input name='f12' type='radio'  value='外商独资企业'  /> 外商独资企业</td>
      <td><input name='f12' type='radio'  value='境外企业'  /> 境外企业</td>
      <td><input name='f12' type='radio'  value='境外企业国内办事处'  /> 境外企业国内办事处</td>
      </tr>
    </table></td></tr>
<tr><td colspan="2"><strong>预定展位</strong></td></tr>
<tr><td colspan="2">A.标准展位 9平方米（3米×3米）标准展台<input id='f13' type='text' name='f13' size='5' value=''/>
  个</td></tr>
<tr><td colspan="2">B.室内光地（18平方米起租）长
  <input type='text' id='f14' name='f14' size='5' value=''/>
  米 × 宽
  <input type='text' name='f15' id='f15' size='5' value=''/>
  米</td></tr>
<tr><td colspan="2">C.室外光地（50平方米起租）
  <input type='text' name='f16' id='f16' size='5' value=''/>
  平方米</td></tr>
<tr>
<td colspan="2" align="center">
<div class="mess_list">
 <div class="mess_title" style=" height:30px; line-height:30px;">安全问题</div><div class="mess_input"><img style="position:relative;top:3px;margin-right:4px;" id="login_captcha" src="../include/vdimgck.php" class="captchaimg" border="0" />
 <input type="text" name="validate" id="mess_rand_rs_" value="" style="width:52px;" />*</div>
</div>

<input style="border:none " name="Submit" type="submit" class="subd" value="提交" />

</td>
</tr>
</tbody>
</form>
</table>

<div class="message_bg"></div>
</div>
<!--mess_main end-->
<div class="list_bot"></div>
</div>

</form>

表单中可以提交的信息非常多，如果都做成字段，需要修改数据库字段，费时费力。

使用js方式就非常方便了。

关键的来了。下面是实现表单提交的js代码：

<script type="text/javascript" language="javascript">
<!--
function check_mess_info(thisForm)
{
var str="";
str=str+"单位名称:"+document.getElementById("uname").value+"\n";
str=str+"地址:"+document.getElementById("f2").value+"\n";
str=str+"公司地址:"+document.getElementById("f3").value+"\n";
str=str+"邮政编码:"+document.getElementById("f4").value+"\n";
str=str+"E-Mail:"+document.getElementById("f5").value+"\n";
str=str+"电话:"+document.getElementById("f6").value+"\n";
str=str+"传真:"+document.getElementById("f7").value+"\n";
str=str+"联系人:"+document.getElementById("f8").value+"\n";
str=str+"职务:"+document.getElementById("f9").value+"\n";
str=str+"展品名称（中文）:"+document.getElementById("f10").value+"\n";
str=str+"展品范围:"+checkall()+"\n";
str=str+"公司性质:"+chk()+"\n";
str=str+"预定展位:"+"\n";
str=str+"A.标准展位 9平方米（3米×3米）标准展台:"+document.getElementById("f13").value+"个"+"\n";

str=str+"B.室内光地（18平方米起租）长:"+document.getElementById("f14").value+"米*"+"宽:"+document.getElementById("f15").value+"米"+"\n";

str=str+"C.室外光地（50平方米起租）:"+document.getElementById("f16").value+"\n";

document.getElementById("mess_message_").value = str;

}

function   checkall()
{
var str="";
var c=document.getElementsByName("f11");
for(var  i=0;i <c.length;i++)
{
if(c[i].checked==true)
      {
         str=str+c[i].value+" | ";
      }
}
return str;
}
function   chk(){  
  var   obj   =   document.getElementsByName('f12');  
  for   (i=0;i<obj.length;i++){  
  if   (obj[i].checked){  
  var str=obj[i].value;  
  }  
  }
  return str;    
  } 

-->
</script>
代码比较多，时间关系，没有精简代码。

对于要扩展dedecms留言板的朋友很有帮助。